CSS erzwingt Bildgrößenänderung und behält Seitenverhältnis bei

Question

Ich arbeite mit Bildern und bin auf ein Problem mit den Seitenverhältnissen gestoßen.

<img src="big_image.jpg" width="900" height="600" alt="" />

Wie Sie sehen können, height y width sind bereits festgelegt. Ich habe eine CSS-Regel für Bilder hinzugefügt:

img {
  max-width: 500px;
}

Aber für big_image.jpg erhalte ich width=500 y height=600 . Wie kann ich Bilder so einstellen, dass ihre Größe verändert wird, ohne ihr Seitenverhältnis zu verändern?

Answer 1

Firefox 71+ (2019-12-03) und Chrom 79+ (2019-12-10) Unterstützung intern Kartierung der width y height HTML-Attribute der Datei IMG Element in das neue aspect-ratio CSS-Eigenschaft.

Das berechnete Seitenverhältnis wird verwendet, um Platz für das Bild zu reservieren, bis es geladen wird. Solange das berechnete Seitenverhältnis dem tatsächlichen Seitenverhältnis des Bildes entspricht, wird ein "Springen" der Seite nach dem Laden des Bildes verhindert.

Damit dies funktioniert, muss eine der beiden Bilddimensionen per CSS in der auto Wert:

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

<img src="example.png" width="1280" height="720" alt="Example" />

In diesem Beispiel wird das Seitenverhältnis von 16:9 (1280:720) beibehalten, auch wenn das Bild noch nicht geladen ist und die effektive Bildbreite kleiner als 1280 ist, weil max-width: 100% .

Siehe auch den entsprechenden Firefox Wanze 392261 .

Answer 2

Entfernen Sie die Eigenschaft "Höhe".

<img src="big_image.jpg" width="900" alt=""/>

Wenn Sie beides angeben, ändern Sie das Seitenverhältnis des Bildes. Wenn Sie nur einen Wert angeben, wird die Größe geändert, aber das Seitenverhältnis bleibt erhalten.

Optional, um Übergrößen einzuschränken:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Answer 3

Hier ist eine Lösung:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Dadurch wird sichergestellt, dass das Bild immer das gesamte übergeordnete Element abdeckt (Verkleinerung und Vergrößerung) und das gleiche Seitenverhältnis beibehält.

Answer 4

Das ist verrückt. Verwenden Sie die Scale-down-Eigenschaft - sie erklärt sich von selbst.

Inline-Styling:

<img src='/nic-cage.png' style={{ maxWidth: '50%', objectFit: 'scale-down' }} />

Dadurch wird verhindert, dass die Biegung sie dehnt. In diesem Fall würde das Bild auf 50 % der Breite des übergeordneten Containers gehen und die Höhe würde entsprechend skaliert werden.

Halten Sie es einfach.

Answer 5

Fügen Sie einfach diese zu Ihrem css, Es wird automatisch schrumpfen und erweitern mit dem ursprünglichen Verhältnis zu halten.

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