使段落元素的宽度与具有固定高度和仅使用HTML/CSS的自动宽度的同级图像的宽度相同

Question

我想知道是否可以完全通过HTML/CSS使段落元素与图像的宽度相同。图像具有固定的高度，在本例中为150px，但宽度由其纵横比自动确定。我不想使用固定的宽度来使它们相等，我希望纵横比继续确定图片宽度和文本宽度。

是否可以使父元素"；。容器"；以某种方式缩小到图像的宽度？或者通过使用flexbox或网格使段落保持与图像相同的宽度？

.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>

Answer 1

我认为您必须在div中使用display: inline-block，并将p标记更改为span标记。

.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>

Answer 2

有点技巧，但只需一点javascript，您就可以获得以下内容：

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>