Ändern Sie die Größe eines Bildes unter Beibehaltung des Seitenverhältnisses mit CSS
- Wenden Sie Styling auf Webseiten mit CSS an
- Stellen Sie das Bildseitenverhältnis mit CSS ein
- Ändern Sie die Größe eines Bildes unter Beibehaltung des gleichen Seitenverhältnisses mit CSS
In dieser trivialen Anleitung geht es darum, ein Bild in Ihrer Website so einzustellen, dass das Seitenverhältnis nicht durch die Bildgröße und den dafür erforderlichen Container gestört wird. Zuerst werden wir uns das CSS-Styling ansehen, um dies zu verstehen.
Wenden Sie Styling auf Webseiten mit CSS an
CSS steht für Cascading Stylesheet. Kaskadieren bedeutet, dass die Stile, die auf ein übergeordnetes Element angewendet werden, automatisch von allen untergeordneten Elementen geerbt werden, bis und sofern Sie keine anderen Stile für die untergeordneten Elemente angeben.
Es gibt mehrere Möglichkeiten, CSS in Ihre Website zu integrieren:
- Inline-CSS: Die Verwendung des
style-Attributs mit einem beliebigen HTML-Element und das Anwenden von Stileigenschaften speziell auf dieses Element wird als Inline-CSS bezeichnet. - Internes Stylesheet: Wenn Sie das Styling nur auf einer Seite Ihrer Website anwenden möchten, verwenden Sie internes CSS. Fügen Sie daher die Stileigenschaften auf dieser Seite, die im Tag
<style>eingeschlossen sind, innerhalb des Teils<head>der HTML-Seite ein. - Externes Stylesheet: Auf alle Seiten der Website kann mithilfe von externem CSS ein Styling angewendet werden. Als Ergebnis erstellen Sie ein Stylesheet, das verschiedene Selektortypen und Stileigenschaften enthält, und fügen es auf allen Webseiten Ihrer Website ein.
Es gibt zahlreiche Eigenschaften, die Bildern in CSS zugeordnet sind. Diese Eigenschaften passen die Bildgröße, Farben, Position usw. auf Ihrer Website an.
Wenn wir Bilder auf unserer Website in einen Container wie jedes div-Element einfügen, hängt seine Größe von der Bildgröße ab. Dies führt manchmal zu Problemen, da einige Bilder größer und andere kleiner sind; Um solche Bilder einzurichten, richten wir ihr Seitenverhältnis ein.
Stellen Sie das Bildseitenverhältnis mit CSS ein
Das Verhältnis zwischen Breite und Höhe eines Elements wird als Seitenverhältnis bezeichnet. Das universelle Videoformat ist 4:3, und zwei gängige Video-Seitenverhältnisse sind 16:9 und 3:2 (universell für HD-Fernsehen und digitales Fernsehen und Standard für YouTube-Videos).
Die Syntax zum Festlegen des Seitenverhältnisses lautet wie folgt:
aspect-ratio: auto || <ratio>;
Setzen Sie es entweder auf den Standardwert, d.h. auto, oder geben Sie ein Breite:Höhe-Verhältnis an. Im Folgenden sind die möglichen Werte mit ihrer Bedeutung aufgeführt:
| Seitenverhältnis | Beschreibung |
|---|---|
Seitenverhältnis: auto; |
Dies ist der Standardwert. |
Seitenverhältnis: 1 / 1; |
Breite und Höhe sind im gleichen Verhältnis. |
Seitenverhältnis: 2 / 1; |
Die Breite des Bildes ist das Doppelte seiner Höhe. |
Seitenverhältnis: 1 / 2; |
Die Breite des Bildes entspricht der halben Höhe. |
Seitenverhältnis: 16 / 9; |
Dies ist das häufig verwendete Verhältnis für Videos. |
Seitenverhältnis: 0.5; |
Das Verhältnis kann auch mit Float-Wert angegeben werden. |
Seitenverhältnis: erben; |
Es erbt das Seitenverhältnis seines übergeordneten Elements. |
Seitenverhältnis: initial; |
Dies entspricht dem Standardwert auto. |
Seitenverhältnis: nicht gesetzt; |
Es entfernt alle Seitenverhältnisse aus dem Element. |
Betrachten Sie ein Beispiel, in dem wir ein Bild platzieren und sein Seitenverhältnis festlegen:
<html>
<head>
<style>
.images{
aspect-ratio: auto;
width: 400px;
}
</style>
</head>
<body>
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
</body>
</html>
In diesem Codesegment haben wir ein Bild platziert und ihm einen Klassenselektor images zugewiesen. Bei dieser Klasse handelt es sich um eine CSS-Klasse, bei der wir das Seitenverhältnis auf auto und die Breite auf 400px gesetzt haben.
Beim Wert auto wird die Höhe automatisch entsprechend der Bildgrösse angepasst.
Jetzt ändern wir das Seitenverhältnis wie folgt:
.images{
aspect-ratio: 2 / 1;
width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
Die Ausgabe wird wie folgt aussehen:
In diesem Ausgabebildschirm können Sie sehen, dass die Höhe des Bildes der Hälfte seiner Breite entspricht. Jetzt verwenden wir das Verhältnis 1 / 2, sodass die Höhe doppelt so breit ist.
.images{
aspect-ratio: 1 / 2;
width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
Ändern Sie die Größe eines Bildes unter Beibehaltung des gleichen Seitenverhältnisses mit CSS
Wir können die Größe eines Bildes ändern, während das Seitenverhältnis mit CSS gleich bleibt. Betrachten Sie beispielsweise das folgende Bild der Größe 428 x 428 Pixel:
Wir können die Größe des obigen Bildes mit CSS ändern, wobei das Seitenverhältnis beibehalten wird. Betrachten Sie das folgende Beispiel:
.images {
display: block;
max-width:250px;
max-height:90px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
Wir verwenden in diesem Codesegment den CSS-Klassenselektor images. Diese Klasse passt das Bild auf eine Größe von 250 x 90 Pixel an, ohne das Seitenverhältnis zu ändern.
Auf diese Weise können wir das Seitenverhältnis entsprechend den Bedürfnissen und Anforderungen unserer Webseite einstellen.
Wir können auch das Bild mit demselben Seitenverhältnis ändern. Dies geschieht hauptsächlich, um die Website auf alle Displaygrößen reagieren zu lassen.