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

125

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?

html width css

— Alfonso
source

5

Que se passe-t-il si vous spécifiez uniquement max-width: 100%?

— Fyodor Soikin

@Fyodor Soikin - Donnez-moi une réponse et je voterai pour vous.

— Gert Grenander

Il serait cependant bon de considérer quels navigateurs prennent en charge la largeur maximale.

— kbrimington

kbrimington apporte un bon point à la table. Selon reference.sitepoint.com/css/max-width#compatibilitysection, l'implémentation d'IE8 est boguée.

— Alfonso

221

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

— Fyodor Soikin
source

1

Chrome semble simplement le laisser à 100% quel que soit le contexte. Peut-être que je devrais arrêter constamment de regarder mon travail sur les logiciels bêta. Je vous remercie!

— Alfonso

Comment faire cela sans utiliser max-width: 100%. Dans React-Native, il n'est pas possible d'utiliser des pourcentages.

— Croolsby

@Croolsby vous pouvez utiliser le pourcentage en natif de réaction, mais avec une valeur de chaîne, comme ceci '100%'

— Rafael Hovsepyan

9

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

— Mattauckland
source

1

L'utilisation a width:auto !important;corrigé un problème dans IE11 pour moi où l'image serait plus grande que son conteneur et IE11 ne réduisait pas l'image. Définir cela dans le imgsélecteur a trié le problème dans IE11. Cependant, le réglage width:100%;sans l'autre règle n'a rien fait dans IE11. Ainsi, le «remplacement» doit être inclus pour que l'image soit réduite à la taille de son conteneur.

— lowtechsun

3

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.

— Amanda
source

1

veuillez fournir un exemple de travail dans la mesure du possible. Ceci est recommandé. :)

— bhb

1

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

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

— Nelles
source

0

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

— Combiner
source

0

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

— Noah Franco
source

juste un fyi .. vous pouvez supprimer la hauteur: auto et la largeur: auto. la hauteur maximale et la largeur maximale sont la même chose.

— Debbie Kurth

0

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

— Scription
source

-1

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

.img_100 {
  width: 100%;
}

— SandroMarques
source

-4

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

Voici le lien

— allsyed
source