Les IMGs responsifs conservent les dimensions

Question

J'ai un site web responsive, où je redimensionne toutes mes images dans les fenêtres correspondantes de la requête CSS3 media. Je me demande s'il existe un moyen plus simple d'indiquer que je veux que toutes mes images soient redimensionnées en conservant leurs dimensions initiales, plutôt que de les redimensionner manuellement en utilisant max-height, width, etc. Des suggestions?

EG Ci-dessous.

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 

#logoimg { max-height: 100px; max-width: 100px; } 

} 

Answer 1

Je crois img {déclarer max-width: 100%} devrait faire l'affaire. L'image va diminuer et maintenir ses dimensions.

Answer 2

C'est ce qui est nécessaire pour ce qui est communément appelé fluid images:

img { 
    max-width: 100%; 
    height: auto; 
} 

La première déclaration fait que toutes les images ne dépassent pas la largeur de leur élément contenant. La déclaration automatique pour la hauteur garantit que toutes les images conservent leurs proportions lorsqu'elles sont réduites, même lorsqu'elles ont des attributs de taille dans l'élément img. De cette façon, vous pouvez simplement déclarer la largeur ou la largeur maximale sur l'élément conteneur du img sans avoir à vous soucier des dimensions/proportions.

Answer 3

Utiliser la taille de l'arrière-plan: contient; ou taille de fond: couverture; le cas échéant.

Answer 4

utilisation élément d'image http://caniuse.com/picture

manuel

http://www.html5rocks.com/en/tutorials/responsive/picture-element/

<picture> 
    <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.png"> 
    <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.png"> 
    <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten"> 
</picture>