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

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

Answer 2

J'avais également le même problème, mais j'ai défini la valeur de la hauteur dans mon CSS à auto et cela a réglé 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;
 }

Answer 3

J'ai trouvé une réponse qui a fonctionné pour moi et qui se trouve dans le lien suivant :

Conteneurs pleine largeur dans des parents à largeur limitée

Answer 4

J'ai trouvé max-width:inherit; a fonctionné pour moi

Answer 5

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

.img_100 {
  width: 100%;
}