Faire une largeur d'image de 100% de la div parent, mais pas plus grande que sa propre largeur

J'essaie d'obtenir une image (placée dynamiquement, sans restrictions sur les dimensions) aussi large que son div parent, mais seulement tant que cette largeur n'est pas plus large que sa propre largeur à 100%. J'ai essayé ceci, en vain:

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

Beaucoup 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 apparaît et est agrandie au-delà de ses dimensions normales, elle a vraiment l'air terrible. Y a-t-il une manière de faire ça?

Précisez simplement max-width: 100%, cela devrait le faire.

J'ai trouvé ce post sur une recherche Google, et il a résolu mon problème grâce à @jwal reply, 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 changé la largeur maximale en fonction des dimensions du conteneur de contenu dans lequel se trouve mon image. Dans ce cas, il s'agit de: largeur du conteneur - remplissage - bord = largeur maximale

De cette façon, mon image ne sortira pas du div contenant et je pourrai toujours faire flotter l'image dans le div content.

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é cela 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).

La définition d'une largeur de 100% correspond à la largeur totale du div dans lequel il se trouve, et non à l'image originale en taille réelle. Il n'y a aucun moyen de faire cela sans JavaScript ou un autre langage de script capable de mesurer l'image. Si vous pouvez avoir une largeur fixe ou une hauteur fixe du div (par exemple 200 px de large), il ne devrait pas être 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.

Dans le style de la ligne - cela fonctionne pour moi à chaque fois

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

Vous devez définir la largeur maximale et si vous le souhaitez, vous pouvez également définir un rembourrage sur l'un des côtés. Dans mon cas, la largeur maximale: 100% était bonne mais l'image était juste à côté de la fin de l'écran.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

J'avais également le même problème, mais j'ai défini la valeur de la hauteur dans mon CSS sur auto et cela a résolu mon problème. N'oubliez pas non plus de faire la propriété d'affichage.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

J'ai trouvé une réponse qui a fonctionné pour moi et peut être trouvée dans le lien suivant:

Conteneurs pleine largeur dans une largeur limitée pour les parents

Si l'image est plus petite que le parent ...

.img_100 {
  width: 100%;
}

J'utiliserais la propriété display: table-cell

Voici le lien