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

我更改了要更改的浏览器的宽度，该宽度与内容中图像的宽度成比例

比如,一开始,

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

这就是我们将如何确定我无法确定的比例。。 等待你的帮助。提前感谢。

只需使用百分比和

HTML:

---

请参见

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

CSS解决方案：

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

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

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

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

jQuery解决方案：

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

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

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

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

---

调整大小在某些浏览器中可能会触发多次，因此如果您想使用jQuery，您可能需要尝试以下解决方案：

为什么不改用%呢？