jquery - CSSでウィンドウのサイズ変更時に画像のサイズを変更するには?

Question

ウィンドウのサイズを変更するときに画像のサイズを変更したい。

私の窓は1600x1200です。私のイメージは1000x500.

使用してみましたbackground-size: coverが、動作しますが、画質が非常に悪いです。

ウィンドウが1000pxより大きい場合は画像を最大1000pxに保ち、1000px未満の場合は画面に基づいてサイズを変更する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;
}