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

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

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

Beaucoup de ces images sont beaucoup plus larges que leur div parent, ce qui est la raison pour laquelle je les aime redimensionner en conséquence, mais quand une petite image apparaît là-bas et est mis à l'échelle au-delà de ses dimensions normales, il semble vraiment terrible. Y a-t-il une manière de faire ça?

Source

2010-08-11 Alfonso

Qu'advient-il si vous spécifiez uniquement 'max-width: 100 % '? –

@Fyodor Soikin - Donnez cette réponse et je voterai pour vous. –

Il serait bon de considérer quels navigateurs supportent la largeur maximale, cependant. – kbrimington

146

Juste spécifier max-width: 100% seul, cela devrait le faire.

Source

2010-08-11 23:47:43

Le chrome semble simplement le laisser à 100% indépendamment du contexte. Peut-être que je devrais arrêter de regarder constamment mon travail sur le logiciel bêta. Je vous remercie! – Alfonso

Cela ne semble pas fonctionner dans Firefox. –

La définition d'une largeur de 100% correspond à la largeur totale de la division, et non à l'image originale en taille réelle. Il n'y a aucun moyen de le faire sans JavaScript ou un autre langage de script qui peut mesurer l'image. Si vous pouvez avoir une largeur fixe ou une hauteur fixe du div (comme 200px de large) alors il ne devrait pas être 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 encore déformée.

Source

2012-07-17 16:46:41 Amanda

s'il vous plaît fournir un exemple de travail chaque fois que possible. [This] (http://jsfiddle.net/) est recommandé. :) – bhb

^oh l'ironie =] – ahnbizcad

J'ai trouvé ce post sur une recherche Google, et il a résolu mon problème grâce à la réponse de @jwal, 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é le maximum de largeur aux dimensions du conteneur de contenu que mon image est dans ce cas, il est: largeur du conteneur - rembourrage - boarder = largeur max

De cette façon. mon image ne sortira pas de la div contenant, et je peux encore faire flotter l'image dans le contenu div.

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

Source

2013-03-06 14:03:17 mattauckland

En utilisant 'width: auto! Important;' résolu un problème dans IE11 pour moi où l'image serait plus grande que son conteneur et IE11 ne pas réduire l'image. Définir cela dans le sélecteur 'img' a résolu le problème dans IE11. Cependant la définition de 'width: 100%;' sans l'autre règle n'a rien fait dans IE11.Le "override" doit donc être inclus pour que l'image soit réduite à la taille de son conteneur. – lowtechsun

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

.img_100 { 
    width: 100%; 
}

Source

2016-12-09 14:32:24 SandroMarques

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

Voici le link

Source

2017-03-22 05:01:18 allsyed

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

Répondre

Questions connexes