我们在codepen上有以下代码。我们遇到的问题是我们使用<picture>
属性来渲染基于 的图像viewport
,但无法让图像占用与覆盖在图像上的文本相同的空间量。
密码详细信息:
- 当前文本具有
background-color: #eee
,因此您可以看到文本占用的区域。 - 图像和文字都有
position: absolute
,但可以改变它。 - 基于
viewport
,我们总是希望<source>
标签中的图像只占用文本占用的内容。
目标:
- 使图像占用与覆盖在顶部的文本相同的高度和宽度
- 使用
<picture>
和<source>
- 不
style: background-image('path/to/image')
使用<div class="item__img">
- 打开裁剪图像以使其适合,但希望它在没有裁剪的情况下完成。
我们如何image
在其顶部的文本扩展时进行扩展?