Faire en sorte que la largeur d'une image corresponde à 100 % de la division parent, mais pas à sa propre largeur.

Question

J'essaie de faire en sorte qu'une image (placée dynamiquement, sans restriction de dimensions) soit aussi large que son div parent, mais seulement si cette largeur n'est pas supérieure à sa propre largeur à 100%. J'ai essayé en vain :

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

La plupart de ces images sont beaucoup plus larges que leur div parent, c'est pourquoi j'aimerais qu'elles soient redimensionnées en conséquence, mais lorsqu'une petite image est placée là et qu'elle est redimensionnée au-delà de ses dimensions normales, l'aspect est vraiment terrible. Existe-t-il un moyen de résoudre ce problème ?

Answer 1

Précisez simplement max-width: 100% seul, ça devrait le faire.

Answer 2

J'ai trouvé ce post sur une recherche Google, et il a résolu mon problème grâce à la réponse de @jwal, mais j'ai fait un ajout à sa solution.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

Avec ce qui précède, j'ai modifié la largeur maximale en fonction des dimensions du conteneur de contenu dans lequel se trouve mon image. Dans ce cas, c'est : largeur du conteneur - padding - boarder = largeur max.

De cette façon, l'image ne sortira pas de la division contenant l'image et je pourrai toujours la faire flotter dans la division de contenu.

J'ai testé dans IE 9, FireFox 18.0.2 et Chrome 25.0.1364.97, Safari iOS et semble fonctionner.

Supplémentaire : J'ai testé ceci sur une image de 1024px de large affichée à 678px (la largeur maximale), et une image de 500px de large affichée à 500px (largeur de l'image).

Answer 3

Pour une largeur maximale qui fonctionne également sur Internet Explorer, vous devrez peut-être faire quelque chose comme ceci :

width: auto !important; /*override the width below*/
width: 100%;
max-width: 100%;

Answer 4

La définition d'une largeur de 100 % correspond à la largeur totale de la division dans laquelle elle se trouve, et non à l'image originale en taille réelle. Il n'y a aucun moyen de le faire sans JavaScript ou un autre langage de script capable de mesurer l'image. Si la largeur ou la hauteur de la division est fixe (200px de large, par exemple), il ne devrait pas y avoir de problème. trop difficile de donner à l'image une plage à remplir. Mais si vous mettez une image de 20x20 pixels dans une boîte de 200x300 pixels, elle sera toujours déformée.

Answer 5

Style en ligne - cela fonctionne pour moi à chaque fois.

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>