web-dev-qa-db-fra.com

Créer une largeur d'image de 100% du parent parent, mais pas plus grande que sa propre largeur

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 tant que cette largeur n'est pas plus large que sa propre largeur à 100%. J'ai essayé cela, en vain:

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

Beaucoup de ces images sont bien plus larges que leur div parent, c’est pourquoi je voudrais qu’elles redimensionnent en conséquence, mais si une petite image apparaît et est agrandie au-delà de ses dimensions habituelles, elle a vraiment l’air terrible. Y a-t-il une manière de faire ça?

htmlwidthcss
111
Alfonso

Spécifiez simplement max-width: 100% seul, cela devrait le faire.

186
Fyodor Soikin

J'ai trouvé cet article sur une recherche Google, et cela a résolu mon problème grâce à la réponse de @jwal, mais j'ai ajouté une solution à 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, il s'agit de: conteneur de largeur - remplissage - panneau - largeur maximale

De cette façon, mon image ne sortira pas de la div qui la contient et je peux quand même la flotter dans la div du contenu.

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

Supplémentaire: je l’ai testé sur une image 1024px de large affichée à 678px (largeur maximale) et une image de 500px large affichée à 500px (largeur de l’image).

8
mattauckland

Définir une largeur de 100% correspond à la largeur totale de la division dans laquelle elle se trouve, pas à l'image d'origine en taille réelle. Il n’ya aucun moyen de le faire sans JavaScript ou un autre langage de script capable de mesurer l’image. Si vous pouvez avoir une largeur fixe ou une hauteur fixe de la div (comme 200px wide), il ne devrait pas être aussi difficile à donner à l'image une plage à remplir. Mais si vous mettez une image 20x20 pixels dans une boîte de 200x300 pixels, elle sera toujours déformée.

3
Amanda

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

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

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

.img_100 {
  width: 100%;
}
0
SandroMarques

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