Bildgröße proportional mit CSS ändern?

Question

Gibt es eine Möglichkeit, die Größe von Bildern proportional zu ändern (zu verkleinern), indem man nur CSS verwendet?

Ich mache den JavaScript-Weg, aber ich versuche nur zu sehen, ob dies mit CSS möglich ist.

Answer 1

Beachten Sie, dass width:50% wird die Größe auf 50% des verfügbaren Platzes für das Bild, während max-width:50% ändert die Größe des Bildes auf 50% seiner natürlichen Größe . Dies ist sehr wichtig zu berücksichtigen, wenn diese Regeln für das mobile Webdesign verwendet werden, also für das mobile Webdesign max-width sollte immer verwendet werden.

UPDATE: Dies war wahrscheinlich ein alter Firefox-Fehler, der inzwischen behoben zu sein scheint.

Answer 2

So skalieren Sie ein Bild unter Beibehaltung des Seitenverhältnisses

Versuchen Sie dies,

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

Answer 3

Wiederholung im Jahr 2015:

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

Ich habe es überarbeitet, da alle gängigen Browser jetzt über die von Cherif oben vorgeschlagene automatische Funktion verfügen, die sogar noch besser funktioniert, da man nicht wissen muss, ob das Bild breiter als hoch ist.

ältere Version: Wenn Sie z.B. durch eine Box von 120x100 begrenzt sind, können Sie Folgendes tun

<img src="http://image.url" height="100" style="max-width: 120px">

Answer 4

<img style="width: 50%;" src="..." />

funktionierte bei mir einwandfrei ... Oder übersehe ich etwas?

Bearbeiten: Aber siehe die Warnung von Shawn vor versehentlichem Upsizing.

Answer 5

Die css-Eigenschaften max-width und max-height funktionieren großartig , werden aber von IE6 und ich glaube IE7 nicht unterstützt. Sie würden dies über Höhe / Breite verwenden wollen, so dass Sie nicht versehentlich ein Bild nach oben skalieren. Sie würden nur wollen, um die maximale Höhe/Breite proportional zu begrenzen.