jquery - 如何在 CSS 中调整窗口大小时的图像大小？

Question

我想在调整窗口大小时调整图像大小。

我的窗户是1600x1200。我的形象是1000x500。

我尝试使用background-size: cover，它可以工作，但图像质量很差。

那么如果窗口大于 1000 像素，是否可以将图像保持在 1000 像素最大值，如果窗口小于 1000 像素（例如background-size: cover），则根据屏幕调整大小？

Answer 1

是的，通过媒体查询

@media(min-width:1000px){
.class{background-size: auto}
}
@media(max-width:999px){
.class{background-size: cover}
}

Answer 2

检测屏幕尺寸

var width = screen.width;
var height = screen.height; 
var img = document.getElementById(image_id); 
img.height = img.height * width / img.width;
img.width = width;

CSS：

img{ width: 100% }

Answer 3

嗨，试试这个：

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}