web-dev-qa-db-fra.com

Comment définir la largeur maximale d'une image en CSS

Sur mon site Web, j'aimerais afficher les images téléchargées par l'utilisateur dans une nouvelle fenêtre d'une taille spécifique (width: 600px). Le problème est que les images peuvent être grandes. Donc, si elles sont plus grandes que celles-ci 600px, j'aimerais les redimensionner en conservant les proportions.

J'ai essayé la propriété max-width CSS, mais cela ne fonctionne pas: la taille de l'image ne change pas.

Y a-t-il un moyen de résoudre ce problème?

HTML:

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS:

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

J'ai également essayé de définir le max-width: 600px pour une image, mais cela ne fonctionne pas. L'image est diffusée à partir d'un servlet (elle est stockée en dehors du dossier webapps de Tomcat).

htmlcssimageimage-resizing
66
user1315305

Vous pouvez écrire comme ceci:

img{
    width:100%;
    max-width:600px;
}

Vérifiez ceci http://jsfiddle.net/ErNeT/

106
sandeep

Le problème est que img la balise est un élément en ligne et vous ne pouvez pas limiter la largeur d'un élément en ligne.

Donc, pour limiter la largeur de la balise img, vous devez d'abord la convertir en un élément inline-block

img.Image{
    display: inline-block;
}
3
Kamlesh Uikey

Étant donné votre largeur de conteneur 600px.

Si vous voulez que des images plus grandes que celles-là tiennent à l'intérieur, ajoutez: CSS:

#ImageContainer img {
    max-width: 600px;
}

Si vous souhaitez que TOUTES les images occupent l’espace disponible (600 pixels):

#ImageContainer img {
    width: 600px;
}
3
Leo Armentano

Essaye ça

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}
1
Krish

Je vois que la réponse finale n’a pas été donnée.

Je vois que vous avez une largeur maximale de 100% et une largeur de 600. Inversez-les.

Un moyen simple est aussi:

     <img src="image.png" style="max-width:600px;width:100%">

Je l’utilise souvent, et vous pouvez ensuite contrôler des images individuelles également, sans avoir à les afficher sur toutes les balises img. Vous pouvez aussi le CSS comme ci-dessous.

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">
0
Merle_the_Pearl

Votre css est presque correct. Il vous manque juste display: block; dans l'image css. Aussi une faute de frappe dans votre identifiant. Ce devrait être <div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>
0
Rhythm Ruparelia