Question

我根据内容中图片的宽度比例更改了您想要更改的浏览器的宽度。

例如，首先;

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 ..

这就是我们如何建立我无法比拟的比例。等待你的帮助。提前谢谢。

Answer 1

只需使用百分比width和height

HTML：

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

CSS：

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

请参阅JSFiddle

Answer 2

如果要在保持相同宽高比的同时调整图像大小，请不要设置宽度和高度。只调整一个。

CSS解决方案：

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

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

Fiddle

jQuery解决方案：

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

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

Fiddle

在某些浏览器中，调整大小会多次触发，因此如果您想使用jQuery，可能需要尝试这样的解决方案：window.resize in jquery firing multiple times

与窗口宽度成比例，用jquery改变div的宽度

2 个答案: