wake-up-neo.com

So legen Sie die maximale Breite eines Bildes in CSS fest

Auf meiner Website möchte ich die vom Benutzer hochgeladenen Bilder in einem neuen Fenster mit einer bestimmten Größe anzeigen (width: 600px). Das Problem ist, dass die Bilder groß sein können. Also, wenn sie größer sind als diese 600px, Ich möchte die Größe ändern und dabei das Seitenverhältnis beibehalten.

Ich habe versucht, die max-width CSS-Eigenschaft, aber es funktioniert nicht: Die Größe des Bildes ändert sich nicht.

Gibt es eine Möglichkeit, dieses Problem zu lösen?

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

Ich habe auch versucht, die max-width: 600px für ein Bild, funktioniert aber nicht. Das Bild wird von einem Servlet gestreamt (es wird außerhalb des Webapps-Ordners von Tomcat gespeichert).

htmlcssimageimage-resizing
66
user1315305

Sie können so schreiben:

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

Überprüfen Sie dies http://jsfiddle.net/ErNeT/

106
sandeep

Das Problem ist, dass img tag ein Inline-Element ist und Sie die Breite des Inline-Elements nicht einschränken können.

Um die Breite des img-Tags zu beschränken, müssen Sie es zunächst in ein Inline-Block-Element konvertieren

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

Angesichts Ihrer Containerbreite 600px.

Wenn Sie möchten, dass nur größere Bilder hineinpassen, fügen Sie Folgendes hinzu: CSS:

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

Wenn Sie möchten, dass ALLE Bilder den verfügbaren Platz (600px) einnehmen:

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

Versuche dies

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

Ich sehe, dass dies nicht als endgültig beantwortet wurde.

Ich sehe, Sie haben eine maximale Breite von 100% und eine Breite von 600. Drehen Sie diese um.

Ein einfacher Weg ist auch:

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

Ich benutze dies oft, und dann können Sie auch einzelne Bilder steuern und haben es nicht auf allen img-Tags. Du könntest es auch gerne unten CSS.

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

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

Dein CSS ist fast korrekt. Sie vermissen nur display: block; im Bild css. Auch ein Tippfehler in Ihrer ID. Es sollte sein <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