0

画像要素のサイズを適切に変更するレスポンシブ CSS を取得しようとしています。

1 つの範囲 ( ) 内で、画像のパーセンテージ幅プロパティ@media screen and (min-width: 600px) and (max-width: 960px)を変更したいと考えています。

具体的には、960 では効果的に になりたいのですwidth: 50%が、600 では効果的に になりたいですwidth: 38.1966%。幅を縮小するピクセルごとに、必要な幅が 0.032787% 減少します。

これまでのところ、これを処理する方法が見つかりませんでしcalc()た。

事実上、最初に基本的な計算を実行する必要があります: (960px - 100vw). 残念ながら、これはピクセル単位で結果を返しますが、数値に変換する必要があるため、目標のパーセンテージ分散を掛けることができます。

それは可能ですか？

4

2 に答える 2

0

純粋なCSS..これは正直なところ混乱していますが、動作します：

フィドル: http://jsfiddle.net/r9xwL0rb/

CSS:

@media screen and (min-width: 600px) and (max-width: 960px){img{width: 50%;}}
@media screen and (min-width: 600px) and (max-width: 959px){img{width: 49.96721278%;}}
@media screen and (min-width: 600px) and (max-width: 958px){img{width: 49.93442556%;}}
@media screen and (min-width: 600px) and (max-width: 957px){img{width: 49.90163833%;}}
... etc (see fiddle for complete source)
于 2014-10-17T13:02:15.813 に答える
0

jQuery を使用する場合:

あなたが言及したようにcssで計算された値を取得したら、それを取得しvar itemWidth = $('#id').innerWidth();ます。次に、ページの幅を取得できますvar bodyWidth = $('body').innerWidth();

したがって、と を使用してパーセンテージを計算し、それを使用bodyWidthしてアイテムの幅を設定するスクリプトを作成できます。itemWidthvar percentVar= itemWidth / bodyWidth * 100;$("#id").css("width", percentVar);

したがって、jQuery は次のようになります。

var main = function(){
    var itemWidth = $('#id').innerWidth();
    var bodyWidth = $('body').innerWidth();
    var percentVar= itemWidth / bodyWidth * 100;
    $("#id").css("width", percentVar);
}

$(document).ready(main)

または、再利用したい場合は、関数を作成し、それをメイン関数に入れます

var main = function(){
    element_sizer('#id');
    element_sizer('#id2');
}

$(document).ready(main)    

function element_sizer(id) {
    var itemWidth = $(id).innerWidth();
    var bodyWidth = $('body').innerWidth();
    var percentVar= itemWidth / bodyWidth * 100;
    $(id).css("width", percentVar);
}

注：必要なものに応じてwidth、innerWidth、を使用できますリンクouterWidth

于 2014-10-17T12:42:47.490 に答える