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!
