Wie kann ich dafür sorgen, dass ein Containerelement die maximale Breite seines untergeordneten Bildes annimmt?

Das umschlossene Element nimmt die maximale Breite des untergeordneten Bildes ein

Problem:

Benutzer will Zeigen Sie das Bild als Teil eines enthaltenden Elements an und möchten Sie, dass die Breite des enthaltenden Elements der Breite des Unterbilds entspricht, auch wenn das enthaltende Element andere Elemente (z. B. Text) enthält.

Problemumgehung:

Eine Problemumgehung besteht darin, die CSS-Anzeigeeigenschaft zu verwenden, um das Umbruchelement auf eine Tabelle festzulegen und seine Breite auf 1 % festzulegen. Dadurch wird das Bild gezwungen, aus dieser Breite auszubrechen und seine eigene Größe auf die Breite des Wrappers einzustellen:

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

<div class="wrapper">
  <img src="image.jpg">
  <p>Your text here</p>
</div>

Auf diese Weise nimmt das Wrapper-Element die maximale Breite des untergeordneten Bildes ein. unabhängig von anderen Elementen Was ist der Inhalt von .

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