So legen Sie die maximale Breite eines Bildes in CSS fest

84

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

Ich habe die max-widthCSS-Eigenschaft ausprobiert , aber sie 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, das max-width: 600pxfür ein Bild festzulegen, aber es funktioniert nicht. Das Bild wird von einem Servlet gestreamt (es wird außerhalb des Webapps-Ordners von Tomcat gespeichert).

— user1315305
quelle

1

Wenn Sie möchten, dass es automatisch verkleinert wird, setzen Sie es einfach, setzen max-widthSie es nicht max-heightund es sollte funktionieren. Wenn nicht, geben Sie Ihren Code ein, damit andere Ihnen helfen können, das Problem zu erkennen.

— Ray Cheng

2

Ich habe gerade Ihr Beispiel ausprobiert und es funktioniert hier. Sind Sie sicher, dass Sie in Ihrem tatsächlichen HTML-Code ("ImageContainerr") nicht denselben Tippfehler haben wie hier in diesem Beispiel?

— Herr Lister

Verdammt, du hast recht. Ich habe meinen Tomcat und meinen Browser neu gestartet, es erneut versucht - und es funktioniert wirklich gut. Trotzdem danke :) Der Tippfehler war nicht der Fall - ich habe die ID und den Klassennamen hier geändert, damit es leichter zu verstehen ist.

— user1315305

3

Aus diesem Grund würde ich annehmen, dass Sie Firebug oder andere Entwicklertools nicht verwenden. Ich schlage vor, Sie holen sich Firebug und lernen, es zu benutzen. (Wenn Sie diese beiden Elemente untersucht haben, haben Sie festgestellt, dass die Breite nicht zum Container hinzugefügt wurde.)

— Joonas

2

Warnung: Diese Frage ist viel weniger allgemein anwendbar als es zunächst erscheint. Es sieht so aus, als ob viele Upvotes daran liegen könnten, dass diese Upvoter auch übersehen haben, dass dasidhier nicht mit dem CSS übereinstimmt. Wie geschrieben (20151201), läuft diese Frage darauf hinaus, dass "CSS-Selektoren, die keinem DOM-Objekt entsprechen, das Erscheinungsbild nicht beeinflussen". ; ^) (Kann nicht herausfinden, ob es besser wäre, die Frage zu bearbeiten, um zu fragen, was der Titel impliziert oder nicht ...)

— Ruffin

133

Sie können so schreiben:

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

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

— Sandeep
quelle

Vielen Dank! Das funktioniert perfekt! Bearbeiten: Nun, nicht genau - es ändert auch die Größe von Bildern, die kleiner als 600px sind - und das ist etwas, was ich nicht will.

— user1315305

3

Ich habe abgestimmt. Was der OP will, ist nicht das, was Sie anbieten. Sie hätten auch erkennen müssen, dass es ein Problem im OP-Code geben könnte, weil normalerweise das, was er versucht hat, funktionieren sollte. Wer jemals gewählt hat, gibt mir einen Grund, danke.

— Joonas

1

@Lollero zuerst OP seine Frage nach meiner Antwort bearbeiten & kannst du erklären, was in meiner Antwort falsch ist? danke

— Sandeep

2

Dies bewahrt nicht das Seitenverhältnis in IE

— Cocowalla

1

Was ist der Zweck der "Breite: 100%"? Die verknüpfte Geige scheint ohne sie gut zu funktionieren? (Getestet in Firefox und Safari auf Mac OX)

— Jon Schneider

12

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. Sie könnten es auch wie unten CSS mögen.

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

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

— Merle_the_Pearl
quelle

5

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

Um die Breite des img-Tags zuerst einzuschränken, müssen Sie es in ein Inline-Block-Element konvertieren

img.Image{
    display: inline-block;
}

— Kamlesh Uikey
quelle

3

Angesichts Ihrer Containerbreite 600px.

Wenn Sie nur größere Bilder wünschen, fügen Sie Folgendes hinzu: CSS:

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

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

#ImageContainer img {
    width: 600px;
}

— Leo Armentano
quelle

Außerdem deuten Kommentare zum OP darauf hin, dass Sie eine falsche ID in der CSS-Datei verwenden: div # ImageContainer ist nicht dasselbe wie <div id = "ImageContainerr">

— Leo Armentano

1

Versuche dies

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

— Krish
quelle

1

Das ist nicht richtig. Ihr Selektor bedeutet "ein img-Element innerhalb eines Bildelements".

— Herr Lister

0

Ihr CSS ist fast korrekt. Sie fehlen nur display: block;in 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>

Erweitern Sie das Snippet

— Rhythmus Ruparelia
quelle