Question

我有一张图像，其中一部分包含样式化的屏幕。我希望文本显示在该屏幕上。为了确保文本不会偏离屏幕，我需要根据图像的高度和宽度设置段落元素的尺寸。

我已经做到了，以便图像自动调整大小以适合窗口，而无需拉伸或滚动：

position: absolute;
max-width: 100%;
max-height: 100%;
height: auto;

但是IMG标签不能有子元素，因此我不能放置知道图像大小的子段落元素。

因此，我的下一个想法是将IMG和段落元素同时包含在包含DIV中。这样，DIV将扩展为图像的大小，并且段落可以根据该大小自行定位。但是DIV的大小仅为0x0；它不会自动扩展以包含图像。有没有办法使父DIV与其子IMG的大小完全相同？

或者，我可以使用DIV的background-image属性包含图像，而不是IMG标签。但是子段落元素是否有办法访问其父DIV背景图像的大小？

Answer 1

我不是100％肯定我理解这个问题，代码示例会有所帮助...但是，如果您的意思是在图像上方放置一些与图像尺寸相关的文本，则一种选择是绝对地放置文本，然后将其转换为与您要查找的偏移量相对应的百分比值：

.container {
   position: relative;
   display: inline-block;
   overflow: hidden;
   img {
      display: block;
   }
}

.copy {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   color: red;
   transform: translate(10%, 20%);
}

<div class="container">
   <img src="https://source.unsplash.com/random/900x400" alt="">
   <div class="copy">
      Some text
   </div>
</div>

工作示例：https://codepen.io/md/pen/daJdjj

将div设置为其子图像或背景图像的大小

1 个答案: