Maintenir les dimensions sensibles MDÉ

Question

J'ai un site réactif, où je Redimensionnement toutes mes images dans les fenêtres des médias CSS3 correspondants requête. Je me demande s'il y a un moyen plus facile de dire que je veux que toutes mes images pour redimensionner le maintien de leurs dimensions originales déclarées au lieu de redimensionner manuellement chaque conséquence avec max-height, width, etc. Toute suggestion?

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 échelle vers le bas et maintenir ses dimensions.

Answer 2

Utilisation de la taille d'arrière-plan: contenir; ou la taille de l'arrière-plan: couvercle; selon le cas.

Answer 3

Voici ce qui est nécessaire pour ce qui est communément appelé images fluides :

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 de la hauteur assure toutes les images conservent leurs proportions lorsque réduite, même quand ils ont des attributs de taille dans l'élément img.

De cette façon, vous pouvez simplement déclarer la largeur ou max-width sur l'élément conteneur du img sans avoir à vous soucier de dimensions / proportions.

Answer 4

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

manuel

http://www.html5rocks.com/en/tutorials/ en réponse / d'éléments d'image /

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