So verhindern Sie Bildlaufleisten mit Objektanpassung: In Flexbox-Containern enthalten?

CSS Object-Fit: Contain behält Bildabmessungen im Layout bei

Problem:

Wann Mithilfe von „object-fit: include“ können Sie die Größe von Bildern innerhalb von Flexbox-Containern ändern. Die Bilder passen sich an, aber die ursprüngliche Bildbreite bleibt erhalten, was dazu führt, dass Bildlaufleisten angezeigt werden.

Erkundung:

object-fit definiert, wie sich ein Bild verhalten soll, wenn sein Container andere Abmessungen als das Bild selbst hat. object-fit: include stellt sicher, dass das Bild ohne Zuschneiden in den Container passt und das Seitenverhältnis erhalten bleibt.

Fehlende CSS-Attribute:

Um das Problem zu beheben, zusätzlich CSS-Attribute sind erforderlich, um die Breite und Höhe des Containers anzugeben.

Lösung:

Anstatt sich auf die ursprüngliche Breite des Bildes zu verlassen, legen Sie die Breite des Containers explizit mit „width“ fest . Geben Sie außerdem mithilfe der Höhe die Höhe des Containers an, um sie an das Seitenverhältnis des Bildes anzupassen.

Aktualisierter CSS-Code:

<code class="css">.half-containers {
  flex: 0 1 50%;
  width: 50%;  /* Specify explicit width for the container */
  height: calc(50% / aspect-ratio);  /* Calculate height based on aspect ratio */
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}</code>

Konzepterklärung:

Durch die explizite Definition der Breite und Höhe des Containers stellen wir sicher, dass das Bild innerhalb der definierten Abmessungen skaliert werden kann und gleichzeitig sein Seitenverhältnis beibehält. Die berechnete Höhe stellt sicher, dass das Bild in den Container passt, ohne es zu verzerren, selbst wenn seine ursprüngliche Breite die Breite des Containers überschreitet.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie Bildlaufleisten mit Objektanpassung: In Flexbox-Containern enthalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!