Maximale Breite des CSS-Bilds auf Originalbildgröße eingestellt?

76

Kannst du das tun? Ich lasse Benutzer Bilder in einen Container hochladen, dessen Breite 100% beträgt, aber ich möchte nicht, dass die Bilder größer als ihre ursprüngliche Größe sind. Danke vielmals!

css image Nikk Wong
quelle
3
Das Bild sollte natürlich die Größe haben, die es hat. Stellen Sie das Bild auch auf Breite: 100 ein?
Theodore Enderby
2
Nein, du kannst nicht. CSS kann die tatsächliche Größe eines zufälligen Bildes nicht ermitteln. Sie benötigen Javascript, um die Bildgröße zu ermitteln und das Bild zu skalieren.
Koala Yeung

Antworten:

122

Stellen Sie nur nicht widthdas Bild ein, sondern nur das max-width.

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

( height:autoist nicht wirklich notwendig, da dies autodie Standardeinstellung ist, aber ich habe es dort eingefügt, um mich daran zu erinnern, dass das Bild seine natürlichen Proportionen haben soll.)

Dieses Snippet enthält zwei Felder, eines, das kleiner als das Bild ist, und eines, das größer ist. Wie Sie sehen können, wird das Bild in der kleineren Box verkleinert, während das Bild in der größeren Box seine normale Größe hat.

div {border:2px outset green; margin:6px 0}
.box1 {width:100px; height:70px;}
.box2 {width:200px; height:100px;}
img {max-width:100%; height:auto}
<div class="box1">
    <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>
<div class="box2">
    <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>
Erweitern Sie das Snippet

Herr Lister
quelle
9
Wenn sich jemand (wie ich) fragt, wie eine geerbte Breiteneinstellung überschrieben werden kann, fügen Sie in der neuen Klasse, die Sie dem Bild zuweisen, einfach width: auto hinzu.
Grasskode
Dadurch wird die maximale Breite auf die Größe des Containers und nicht auf die ursprüngliche (oder natürliche) Größe des Bildes festgelegt.
Tom
@ Tom das stimmt, gemäß den Bedingungen in der OP-Frage. Haben Sie ein anderes Szenario? In diesem Fall ist es möglicherweise besser, eine neue Frage zu stellen.
Herr Lister
So lese ich die OP-Anforderungen nicht. Er bittet darum, dass die ursprünglichen / natürlichen Abmessungen nicht überschritten werden, anstatt den Behälter nicht zu überschreiten.
Tom
2
@MrLister developer.mozilla.org/en-US/docs/Web/CSS/max-width Die maximale Breite als Prozentsatz definiert die maximale Breite als Prozentsatz der Breite des enthaltenen Blocks
Tom
0

Sie können die maximale Breite des Bildes in einem Stil-Tag für das Bild selbst festlegen. Stellen Sie dann im Stylesheet den Anzeigetyp auf "Block", die Breite auf den gewünschten Prozentsatz des Containers und die Höhe auf Auto ein. Fügen Sie dann den Rand hinzu: 0px auto, und es sollte perfekt zentriert sein und niemals größer sein als die ursprüngliche Größe.

Wenn es sich um vom Benutzer hochgeladene Bilder handelt und Sie beispielsweise PHP verwenden, ermitteln Sie die Bildbreite mithilfe von getImageSize () und fügen Sie das Style-Tag programmgesteuert zum Bild hinzu.

Nancy Hastings-Trew
quelle