如何在窗口中調整圖像大小在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% }