Comment puis-je faire en sorte qu'un élément conteneur adopte la largeur maximale de son image enfant ?

L'élément enveloppé prend la largeur maximale de l'image enfant

Problème :

Utilisateur veut Affichez l'image dans le cadre d'un élément conteneur et souhaitez que la largeur de l'élément conteneur soit égale à la largeur de la sous-image, même si l'élément conteneur contient d'autres éléments (tels que du texte).

Solution de contournement :

Une solution de contournement consiste à utiliser la propriété d'affichage CSS pour définir l'élément d'habillage sur un tableau et définir sa largeur sur 1 %. Cela forcera l'image à sortir de cette largeur et à définir sa propre taille sur la largeur du wrapper :

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

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

De cette façon, l'élément d'emballage prendra la largeur maximale de l'image enfant, Indépendamment des autres éléments Quel est le contenu de .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!