How Can I Make a Container Element Adopt the Maximum Width of its Child Image?

The wrapped element takes the maximum width of the child image

Problem:

User wants Display the image as part of a containing element, and want the width of the containing element to be equal to the width of the subimage, even if the containing element contains other elements (such as text).

Workaround:

One workaround is to use the CSS display property to set the wrapping element to a table and set its width to 1%. This will force the image to break out of that width and set its own size to the width of the wrapper:

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

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

This way the wrapping element will take the maximum width of the child image, regardless of other elements What is the content of .

The above is the detailed content of How Can I Make a Container Element Adopt the Maximum Width of its Child Image?. For more information, please follow other related articles on the PHP Chinese website!