Wie kann das Seitenverhältnis beibehalten werden, während ein Bild in ein Div eingepasst wird?

Beibehalten des Seitenverhältnisses beim Einpassen eines Bildes in ein Div

Bei der Anzeige eines Bildes auf engstem Raum ist es oft wünschenswert, es einzupassen, ohne das Seitenverhältnis zu beeinträchtigen. HTML und CSS bieten eine elegante Lösung, um dies zu erreichen.

Ansatz

Der Schlüssel zum Beibehalten des Seitenverhältnisses des Bildes liegt in der Verwendung der CSS-Eigenschaften max-height und max-width. So implementieren Sie es:

1. Legen Sie die Div-Höhe und -Breite fest: Bestimmen Sie die gewünschte Höhe und Breite des Div, das das Bild enthalten soll.

2. Wenden Sie max-height und max-width an Bild:

   • max-height: 100 %;: Stellt sicher, dass die Bildhöhe die Höhe des Divs nicht überschreitet.
   • max-width: 100 %;: Verhindert das Bild Breite davon ab, über die Breite des Divs hinauszulaufen.

Von Dadurch wird das Bild innerhalb der Div-Grenzen verkleinert oder vergrößert, während sein Seitenverhältnis erhalten bleibt.

Beispiel

Betrachten Sie den folgenden HTML- und CSS-Code:

<div>

In In diesem Beispiel passt das Bild „my-image.jpg“ seine Größe dynamisch an das 48x48-Div an und behält dabei sein Original bei Proportionen.

Das obige ist der detaillierte Inhalt vonWie kann das Seitenverhältnis beibehalten werden, während ein Bild in ein Div eingepasst wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!