Comment redimensionner une image lors du redimensionnement de la fenêtre en CSS?

Question

Je veux redimensionner une image lorsque je redimensionne la fenêtre.

Ma fenêtre est 1600x1200. Mon image est 1000x500.

J'ai essayé d'utiliser background-size: cover, cela fonctionne mais la qualité de l'image est très médiocre.

Y a-t-il une alternative pour maintenir l'image à un maximum de 1000px si la fenêtre est plus grande que 1000px et redimensionner en fonction de l'écran si elle est inférieure à 1000px (comme background-size: cover) ?

Answer 1

Oui, avec requête média

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

Answer 2

Détection des dimensions de l'écran

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

Bonjour, essayez ceci :

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