如何在窗口中调整图像大小在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

海兰，试试这个：

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

Answer 3

检测屏幕尺寸

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