Comment puis-je ajuster automatiquement un élément Wrapper à la largeur maximale de son image enfant ?

Faire en sorte que le Wrapper prenne la largeur maximale de l'image enfant ?

Introduction :

Dans la conception de sites Web , il peut être nécessaire de créer un élément wrapper qui s'ajuste automatiquement à la largeur de son contenu enfant. Ceci est particulièrement utile lorsque le contenu enfant est une image, car sa largeur peut varier en fonction de sa source.

Résultat souhaité :

Vous souhaitez créer un élément wrapper qui prendra la largeur maximale de son image enfant sans définir explicitement une largeur fixe. Cela garantit que le wrapper n'est pas plus large que nécessaire, tout en permettant à l'image de s'afficher correctement.

Solution :

Bien qu'il ne soit pas possible d'obtenir ce comportement en utilisant CSS pur, il existe un "hack" qui peut être utilisé. En forçant l'élément wrapper à être un tableau et en définissant sa largeur à 1 %, vous pouvez inciter l'image à briser la largeur du wrapper et à définir sa propre largeur comme largeur du wrapper.

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>

Explication :

Lors de l'affichage est défini sur table, l'élément est converti en tableau et ses éléments enfants deviennent des cellules de tableau. Cependant, l'emballage a également une largeur de 1 %, ce qui est très petit. L'image ignore donc la largeur du wrapper et définit sa propre largeur, qui devient la largeur réelle du wrapper.

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!