Make paragraph element same width as a sibling image that has a fixed height and an auto width with only HTML/CSS

Question

I am wondering if it is possible to make the paragraph element the same width as the image entirely through HTML/CSS. The image has a fixed height, 150px in this example, but the width is automatically determined by its aspect ratio. I don't want to use a fixed width to make them equal, I want the aspect ratio to continue to determine the picture width and the text width.

Is it possible to make the parent element ".container" shrink to the width of the image somehow? Or somehow make the paragraph stay the same width as the image by using flexbox or grid?

.image {
    height: 150px;
}

<div class="container">
  <img class="image" src="https://solidstarts.com/wp-content/uploads/Grapefruit_Edited-scaled.jpg" />
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna nulla, tincidunt at fringilla molestie, sodales et nunc. Quisque vestibulum magna nisi, in congue augue semper at. Integer lobortis elementum neque at consequat. Etiam non sollicitudin tortor. Morbi bibendum libero sed venenatis congue. Sed finibus sem in rutrum congue. Maecenas mi purus, sodales quis vestibulum ut, scelerisque ut elit. Nullam sodales id orci sed aliquet. Fusce vitae erat feugiat neque congue ultricies. In massa ligula, pellentesque nec dui sed, maximus tristique ipsum. Integer vestibulum congue augue. Praesent a mattis odio. Aenean eget leo lacus.</p>
</div>

When your content more line from the image then what are the scenarios you needed to show? — Md. Abu Sayed, Apr 26 '21 at 03:34

score 1 · Answer 1 · answered Apr 26 '21 at 04:17

I think you have to use display: inline-block in div and change from p tag to span tag.

.container { position: relative; display: inline-block; } 
.image { display: block; height: 150px; } 
.text { position: absolute; left: 0; bottom: 150; width: 100%; }

<div class="container">
      <img class="image" src="https://solidstarts.com/wp-content/uploads/Grapefruit_Edited-scaled.jpg" />
      <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna nulla, tincidunt at fringilla molestie, sodales et nunc. Quisque vestibulum magna nisi, in congue augue semper at. Integer lobortis elementum neque at consequat. Etiam non sollicitudin tortor. Morbi bibendum libero sed venenatis congue. Sed finibus sem in rutrum congue. Maecenas mi purus, sodales quis vestibulum ut, scelerisque ut elit. Nullam sodales id orci sed aliquet. Fusce vitae erat feugiat neque congue ultricies. In massa ligula, pellentesque nec dui sed, maximus tristique ipsum. Integer vestibulum congue augue. Praesent a mattis odio. Aenean eget leo lacus.</span>
    </div>

score -2 · Answer 2 · answered Apr 26 '21 at 03:41

A bit hacky but with a little javascript, you can get this:

document.querySelector(".container").style.width = document.querySelector(".image").width + "px";

.image {
  height: 150px;
}

<div class="container">
  <img class="image" src="https://solidstarts.com/wp-content/uploads/Grapefruit_Edited-scaled.jpg" />
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna nulla, tincidunt at fringilla molestie, sodales et nunc. Quisque vestibulum magna nisi, in congue augue semper at. Integer lobortis elementum neque at consequat. Etiam non sollicitudin tortor. Morbi bibendum libero sed venenatis congue. Sed finibus sem in rutrum congue. Maecenas mi purus, sodales quis vestibulum ut, scelerisque ut elit. Nullam sodales id orci sed aliquet. Fusce vitae erat feugiat neque congue ultricies. In massa ligula, pellentesque nec dui sed, maximus tristique ipsum. Integer vestibulum congue augue. Praesent a mattis odio. Aenean eget leo lacus.</p>
</div>

Thanks, but I'm looking for a solution that doesn't require javascript — Adam Spindler, Apr 26 '21 at 03:45

Make paragraph element same width as a sibling image that has a fixed height and an auto width with only HTML/CSS

2 Answers2