Wie passt man ein Bild genau in ein Div ein und behält dabei das Seitenverhältnis bei?

Aufrechterhaltung des Seitenverhältnisses eines Bildes innerhalb einer Div

Frage:

Wie kann man ein Bild genau in eine Div einpassen? Element unter Beibehaltung seines Seitenverhältnisses, um sicherzustellen, dass kein Teil des Bildes beschnitten oder verzerrt wird?

Antwort:

Um dies mit CSS zu erreichen, verwenden Sie die folgenden Eigenschaften:

img {
  max-height: 100%;
  max-width: 100%;
}

1. max-height: 100 %;: Setzt die maximale Höhe des Bildes auf 100 % seines Container-Div. Dadurch wird sichergestellt, dass das Bild die Höhe des Divs nicht überschreitet.
2. max-width: 100 %;: Ähnlich wie max-height, aber für die Breite. Dadurch wird die maximale Breite des Bildes auf 100 % seines Container-Divs festgelegt.

Erklärung:

Durch die Kombination dieser beiden Eigenschaften wird das Bild effektiv verkleinert um in das Div zu passen und gleichzeitig das ursprüngliche Seitenverhältnis beizubehalten. Das Bild wird proportional verkleinert, um sicherzustellen, dass keine Teile beschnitten oder verzerrt werden.

Zusätzliche Hinweise:

1. Wenn Sie das Bild innerhalb des Div. zentrieren möchten , fügen Sie die folgende CSS-Eigenschaft hinzu:

img {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Alternativ können Sie die Eigenschaft „object-fit“ verwenden, um ähnliche Ergebnisse zu erzielen, obwohl sie möglicherweise nicht in allen Browsern unterstützt wird.

Das obige ist der detaillierte Inhalt vonWie passt man ein Bild genau in ein Div ein und behält dabei das Seitenverhältnis bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!