So legen Sie die maximale Breite eines Bildes in CSS fest

Question 1

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

Question 2

Sie können so schreiben:

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

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

Question 3

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">

Question 4

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

Question 5

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

Question 6

Versuche dies

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

Question 7

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

Answer 1

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

html css image image-resizing 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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

1

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

Sandeep

Answer 11

2

Dies bewahrt nicht das Seitenverhältnis in IE

Cocowalla

Answer 12

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

Answer 13

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">

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

1

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

Herr Lister

Answer 19

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

So legen Sie die maximale Breite eines Bildes in CSS fest

Antworten: