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

Je vais essayer d'obtenir une image (de manière dynamique, avec pas de restrictions sur les dimensions) pour être aussi large que son parent div, mais seulement aussi longtemps que la largeur n'est pas plus large que sa propre largeur à 100%. J'ai essayé, en vain:

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

Beaucoup de ces images sont de manière plus large que le div parent, c'est pourquoi je tiens à redimensionner en conséquence, mais quand une petite image apparait et il les obtient mis à l'échelle au-delà de ses normal dimensions, il a vraiment l'air terrible. Est-il possible de faire cela?

Qu'advient-il si vous ne spécifiez max-width: 100% ?
Soikin - Donner une réponse et je vais voter pour vous.
Il serait bien de réfléchir à ce qui les navigateurs prennent en charge max-width, cependant.
kbrimington apporte un bon point pour la table. Selon reference.sitepoint.com/css/max-width#compatibilitysection IE8 mise en œuvre est buggé.

InformationsquelleAutor Alfonso | 2010-08-11

195

Il suffit de spécifier max-width: 100% seul, cela devrait le faire.
- Chrome semble tout simplement le laisser à 100% quel que soit le contexte. Peut-être que je devrais arrêter de constamment à la recherche de mon travail sur la version bêta du logiciel. Merci!!!!
- Cela ne semble pas fonctionne pas dans Firefox.
- Comment voulez-vous faire cela sans l'aide de max-width: 100%. En Réaction Indigène, il n'est pas possible d'utiliser des pourcentages.
InformationsquelleAutor Fyodor Soikin
8

Trouvé ce post sur une recherche Google, et il a résolu mon problème grâce à @jwal réponse, 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;
}
```
Ci-dessus, j'ai changé le max-width pour les dimensions du conteneur de contenu que mon image est en. Dans ce cas, il est: conteneur largeur - padding - pensionnaire = largeur max

De cette façon, mon image ne sera pas sortir de la div contenant, et je peux encore flotter l'image à l'intérieur de la div du contenu.

Je l'ai testé sous 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 1024px de large affiché à 678px (la largeur), et une image de 500px de large affiché à 500 px (largeur de l'image).
- À l'aide de width:auto !important; correction d'un problème dans IE11 pour moi où l'image serait plus grand que le contenant et IE11 pas de mise à l'échelle de l'image. La définition de cette dans le img sélecteur triées de la question dans IE11. Cependant réglage width:100%; sans l'autre règle n'a rien fait dans IE11. Si le champ "remplacer" doit être inclus pour l'image à l'échelle vers le bas de son conteneur de la taille.
InformationsquelleAutor mattauckland
3

Définition d'une largeur de 100% de la largeur de la div c'est dans, pas l'original de la taille de l'image. Il n'y a aucun moyen de le faire sans JavaScript ou quelque autre langage de script qui permet de mesurer l'image. Si vous pouvez avoir une largeur fixe ou fixe la hauteur de la div (comme 200px de large), alors il ne devrait pas être trop dur pour donner à l'image une gamme de remplir. Mais si vous mettez une 20x20 pixels de l'image dans un 200x300 pixels, elle sera toujours déformé.
- veuillez fournir un exemple à chaque fois que possible. Ceci est recommandée. 🙂
- ^ oh l'ironie =]
InformationsquelleAutor Amanda
0

Vous devez définir la largeur et si vous le souhaitez, vous pouvez également définir certains rembourrage sur l'un des côtés. Dans mon cas, le max-width: 100% était bonne, mais l'image était juste à côté de l'extrémité de l'écran.
```
  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/
```
InformationsquelleAutor Combine
0

J'ai également le même problème, mais j'ai mis la valeur de la hauteur dans mon CSS pour auto et qui a résolu mon problème. Aussi, ne pas oublier de faire l'affichage de la propriété.
```
  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  
```
- juste pour info..vous pouvez supprimer le height:auto et width:auto. le max-height et max-width est la même chose.
InformationsquelleAutor Noah Franco
0

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

Pleine Largeur de Conteneurs dans la Largeur Limitée Parents

InformationsquelleAutor Scription
-1

Si l'image est plus petite que parent...
```
.img_100 {
  width: 100%;
}
```
InformationsquelleAutor SandroMarques
-4

Je voudrais utiliser la propriété display: table-cell

Ici est la lien

InformationsquelleAutor allsyed

Vous devez vous connecter pour publier un commentaire.