时间戳

首页 > 解决方案 > 使段落元素与具有固定高度和仅使用 HTML/CSS 的自动宽度的同级图像具有相同的宽度

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

问题描述

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

是否有可能使父元素“.container”以某种方式缩小到图像的宽度？或者以某种方式通过使用 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>

标签： htmlcss

解决方案

我认为您必须display: inline-block在 div 中使用并从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>

推荐阅读