如何在CSS中调整窗口大小调整图像大小？

Question

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

我的窗口是1600x1200。 我的图片是1000x500。

我尝试使用background-size: cover，它有效，但图像质量很差。

如果窗口大于1000px 并且基于屏幕大小调整大小（如background-size: cover），那么可以选择将图像保持为最大1000px ？

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

Hy，试试这个：

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