Wie kann ich das Bildseitenverhältnis innerhalb eines Div mithilfe von CSS beibehalten?

Beibehalten des Seitenverhältnisses eines Bildes innerhalb eines Div

Oft ist es wünschenswert, ein Bild innerhalb eines Divs anzuzeigen und dabei sein Seitenverhältnis beizubehalten. Dadurch wird sichergestellt, dass das Bild ohne jegliche Verzerrung vollständig sichtbar ist. Um dies zu erreichen, können Sie bestimmte CSS-Eigenschaften nutzen.

Lösung mit CSS:

Fügen Sie innerhalb des Div, in dem das Bild platziert wird, die folgenden CSS-Regeln zum Bild hinzu element:

max-height: 100%;
max-width: 100%;

Diese CSS-Eigenschaften weisen den Browser an, die Abmessungen des Bildes innerhalb der Grenzen des div einzuschränken. Die Eigenschaft max-height begrenzt die vertikale Größe, während max-width die horizontale Größe einschränkt. Indem beide Eigenschaften auf 100 % gesetzt werden, wird das Bild so verkleinert, dass es in das Div passt, während sein ursprüngliches Seitenverhältnis erhalten bleibt.

Beispiel:

<div class="image-container">
  <img src="image.jpg" />
</div>

.image-container {
  width: 48px;
  height: 48px;
}

.image-container img {
  max-height: 100%;
  max-width: 100%;
}

In diesem Beispiel passt ein 48x48-Bild in ein 48x48-Div unter Beibehaltung des Seitenverhältnisses des Bildes. Die Größe des Bildes wird so angepasst, dass es vollständig innerhalb des Div angezeigt wird, ohne dass es zugeschnitten oder verzerrt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich das Bildseitenverhältnis innerhalb eines Div mithilfe von CSS beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!