Wie kann ich dafür sorgen, dass sich ein Wrapper-Element automatisch an die maximale Breite seines untergeordneten Bildes anpasst?

Wrapper auf maximale Breite des untergeordneten Bildes einstellen?

Einführung:

Im Website-Design kann es erforderlich sein, ein Wrapper-Element zu erstellen, das sich automatisch an die Breite seines untergeordneten Inhalts anpasst. Dies ist besonders nützlich, wenn es sich bei dem untergeordneten Inhalt um ein Bild handelt, da seine Breite je nach Quelle variieren kann.

Gewünschtes Ergebnis:

Sie möchten ein Wrapper-Element erstellen Das nimmt die maximale Breite seines untergeordneten Bildes an, ohne explizit eine feste Breite festzulegen. Dadurch wird sichergestellt, dass der Wrapper nicht breiter als nötig ist und das Bild trotzdem korrekt angezeigt wird.

Lösung:

Dieses Verhalten lässt sich zwar mit nicht erreichen Für reines CSS gibt es einen „Hack“, der verwendet werden kann. Indem Sie das Wrapper-Element als Tabelle erzwingen und seine Breite auf 1 % festlegen, können Sie das Bild dazu verleiten, die Wrapper-Breite zu unterbrechen und seine eigene Breite als Wrapper-Breite festzulegen.

Code:

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum...</p>
</div>

Erklärung:

Bei Anzeige auf Tabelle gesetzt ist, wird das Element in eine Tabelle umgewandelt und seine untergeordneten Elemente werden zu Tabellenzellen. Allerdings erhält das Deckblatt auch eine Breite von 1 %, was sehr gering ist. Das Bild ignoriert daher die Breite des Wrappers und legt seine eigene Breite fest, die zur tatsächlichen Breite des Wrappers wird.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass sich ein Wrapper-Element automatisch an die maximale Breite seines untergeordneten Bildes anpasst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!