-2

コンテンツ内の画像の幅に比例して、変更したいブラウザの幅を変更しました。

たとえば、最初は;

Browser Width: 1600 px | Height: 800 px
Image Width: 1024 px | Height: 660 px

時間が変わった後;

Browser width: 1200px | height: 600px
image width: 600px | height: 400px such as ..

これが私ができなかった比率を確立する方法です..あなたの助けを待っています。前もって感謝します。

4

2 に答える 2

0

同じアスペクト比を維持しながら画像のサイズを変更する場合は、幅と高さを設定しないでください。1つだけ調整します。

CSSソリューション：

@media only screen and (max-width: 1600px) {
    img {
        width: 1024px;
    }
}

@media only screen and (max-width: 1200px) {
    img {
        width: 600px;
    }
}

フィドル

jQueryソリューション：

$(window).resize(function() {
    var theWidth = $(window).width();

    if (theWidth >= 1600) {
        $(img).css('width','1024px');
    } else if (theWidth < 1200) {
        $(img).css('width','600px');
    }
});

フィドル

一部のブラウザではサイズ変更が複数回発生する傾向があるため、jQueryを使用する場合は、次のようなソリューションを試してみてください。jqueryでwindow.resizeを複数回発生させる

于 2013-01-29T21:20:53.663 に答える
0

パーセンテージwidthを使用してheight

HTML：

<img src="http://lorempixel.com/1024/600"/>

CSS：

img {
    width: 65%;
    height: 80%;
}

JSFiddleを参照してください

于 2013-01-29T21:16:14.863 に答える