So skalieren Sie Bilder proportional mit CSS

So skalieren Sie Bilder proportional mit CSS: Sie können das Attribut „object-fit“ verwenden, z. B. [object-fit: cover;]. Das Attribut „object-fit“ gibt an, wie der Inhalt des Elements in die Höhe und Breite des angegebenen Containers passen soll.

Attributeinführung:

object-fit-Attribut gibt an, wie sich der Inhalt des Elements an die Höhe und Breite des angegebenen Containers anpassen soll.

(Lernvideo-Sharing: css-Video-Tutorial)

object-fit wird im Allgemeinen für Bild- und Video-Tags verwendet. Im Allgemeinen können diese Elemente unter Beibehaltung der ursprünglichen Proportionen geschnitten, skaliert oder direkt gestreckt werden.

Syntax:

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Attributwert:

• fill Standardmäßig ist die ursprüngliche Proportion nicht garantiert und der Inhalt wird gestreckt, um den gesamten Inhaltscontainer auszufüllen.

• enthalten Behalten Sie die ursprünglichen Größenproportionen bei. Inhalte werden skaliert.

• Cover behält die ursprünglichen Größenproportionen bei. Einige Inhalte können jedoch gekürzt werden.

• none behält die Länge und Breite des ursprünglichen Elementinhalts bei, was bedeutet, dass der Inhalt nicht zurückgesetzt wird.

• Beim Verkleinern bleibt das ursprüngliche Größenverhältnis erhalten. Die Größe des Inhalts ist dieselbe wie bei „none“ oder „contain“, je nachdem, was zu einem kleineren Objekt führt.

• initial Auf Standardwert setzen

• inherit Erbt Attribute vom übergeordneten Element dieses Elements.

Beispiel:

Schneiden Sie das Bild aus und behalten Sie die ursprünglichen Proportionen bei:

img.a {
  width: 200px;  
    height: 400px;  
    object-fit: cover;
}

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo skalieren Sie Bilder proportional mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!