Wie kann ich dafür sorgen, dass Bilder Divs in CSS proportional füllen?

So zeigen Sie proportionale Bilder in gefüllten Divs an

In CSS kann es eine Herausforderung sein, eine perfekte Passform für Bilder innerhalb eines Divs zu erreichen, insbesondere wenn Sie möchten ihr Seitenverhältnis beibehalten. Hier ist eine prägnante Lösung, um ein Div mit einem Bild zu füllen und dabei die Proportionalität beizubehalten:

Objektanpassung nutzen

Die meisten modernen Browser unterstützen die Objektanpassungseigenschaft, sodass Sie die Kontrolle haben wie Bilder in ihren Containern angezeigt werden. Für dieses Szenario können Sie das folgende CSS verwenden:

.image-container {
  overflow: hidden;
}

.image-container img {
  object-fit: contain;
}

Object-fit: include stellt sicher, dass das Bild den Container ausfüllt und dabei seine ursprünglichen Proportionen beibehält. Außerdem wird verhindert, dass das Bild beschnitten oder verzerrt wird.

Flexbox verwenden

Ein alternativer Ansatz ist die Verwendung von Flexbox. Mit dieser Technik können Sie das Bild innerhalb des Divs zentrieren und seine Größe flexibel anpassen und so den gewünschten Effekt erzielen:

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image-container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

In diesem Szenario füllt das Bild immer die verfügbare Höhe oder Breite des Divs aus, während das Seitenverhältnis beibehalten wird.

Implementierungsbeispiel

Um diese Lösung zu implementieren, wenden Sie einfach das entsprechende CSS auf das Div an, das das enthält Bild:

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

Hinweis: Stellen Sie sicher, dass die Überlaufeigenschaft im Div auf „verborgen“ gesetzt ist, um zu verhindern, dass das Bild außerhalb seiner Grenzen überläuft.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass Bilder Divs in CSS proportional füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!