So verwenden Sie CSS, um die Höhe eines Bildes automatisch zu skalieren

Wir wissen, dass in Bild-Listenlayouts wie dem Wasserfallfluss oft die Verwendung von CSS zur Steuerung der Breite und Höhe von Bildern in DIVs zu sehen ist. Tatsächlich ist ein solches Layout sehr einfach. Ich werde es Ihnen heute ausführlich erklären.

Wenn wir auf ein solches DIV-CSS-Layout stoßen, ist es eigentlich sehr einfach. Wir müssen nur die Breite des Bildes steuern und die Höhe des Bildes muss nicht festgelegt werden Das Bild passt sich automatisch an das Skalierungsverhältnis an (wenn die Höhe nicht festgelegt ist, ist der Höhenwert standardmäßig automatisch adaptiv).

Fügen Sie wie oben gezeigt ein DIV-Feld mit dem Namen „.imgbox“ mit CSS hinzu, und die Breite des Bildes beträgt 252 Pixel. Zu diesem Zeitpunkt erfahren Sie, wie Sie CSS schreiben, um die Höhe des Bildes im festzulegen Objekt wird automatisch entsprechend der Breite skaliert:

.imgbox img{width:252px}

So einfach ist es,CSS-Selektor steuern zu können die Breite des Bildes im DIV-Feld „.imgbox“, ohne den CSS-Höhenstil (height) festzulegen, sodass das Standardbild adaptiv an die Breite skaliert wird.

Zusammenfassung:

Anfänger vergessen möglicherweise, dass Breite und Höhe standardmäßig adaptiv sind, wenn sie nicht festgelegt sind. Sie können daher auf das Problem stoßen, die Bildbreite festzulegen, was sie tun müssen Stellen Sie es ein. Tatsächlich muss CSS unter der Anforderung einer festen Bildbreite und einer adaptiven Höhe im CSS-Layout nur den Breitenwert festlegen, und die Höhe kann den gewünschten Layouteffekt erzielen, ohne dass Einstellungen hinzugefügt werden müssen.

Wenn die Bildhöhe und -breite im Layout festgelegt sind, müssen Sie unabhängig von der Größe oder Proportionalität des Bildes die Breite und Höhe des Bildes im Layout festlegen Feste Breite und Höhe für das Bild gleichzeitig.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Analysen gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erstellen Sie eine adaptive DIV-Höhe

in HTML So verwenden Sie CSS zum Ausblenden von Divs

Detaillierte Erläuterung des Front-End-Responsive-Layouts, der responsiven Bilder und des selbst erstellten Rastersystems

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um die Höhe eines Bildes automatisch zu skalieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!