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

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;
    }
}

小提琴

---

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 多次触发