html - 如何在文本覆盖扩展时扩展图像?
问题描述
我们在codepen上有以下代码。我们遇到的问题是我们使用<picture>
属性来渲染基于 的图像viewport
,但无法让图像占用与覆盖在图像上的文本相同的空间量。
密码详细信息:
- 当前文本具有
background-color: #eee
,因此您可以看到文本占用的区域。 - 图像和文字都有
position: absolute
,但可以改变它。 - 基于
viewport
,我们总是希望<source>
标签中的图像只占用文本占用的内容。
目标:
- 使图像占用与覆盖在顶部的文本相同的高度和宽度
- 使用
<picture>
和<source>
- 不
style: background-image('path/to/image')
使用<div class="item__img">
- 打开裁剪图像以使其适合,但希望它在没有裁剪的情况下完成。
我们如何image
在其顶部的文本扩展时进行扩展?
解决方案
object-fit
你可以在你的 img 上使用属性:
.item {
position: relative;
width: 33%;
}
img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
}
.item__text {
background-color: #eee;
opacity: 0.5;
padding:32px;
}
<div class="item">
<div class="item__img">
<picture>
<source media="(min-width: 1300px)" srcset="https://placeimg.com/1000/480/nature">
<source media="(min-width: 1024px)" srcset="https://placeimg.com/960/480/nature">
<img src="https://placeimg.com/640/480/nature" alt="Flowers">
</picture>
</div>
<div class="item__text">
<h3>Some title</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. </p>
</div>
</div>
推荐阅读
- c - Clang 使用 var args 编译对 void 函数的调用
- c# - 捕获异常后如何使程序重复执行?
- python - Python如何在递归函数中评估“和”?
- javascript - 如何设置一些文本合并然后可点击?
- javascript - 如何在 Laravel 中使用 JQuery 将单个输入字段值发送到控制器
- dart - 颤振 - 异步函数总是返回 null,而它不为 null
- logging - 如何在旧的 Sinatra API 应用程序中登录和调试?
- cpanel - 激活 Cloudflare 保护后无法访问 WHM 自定义名称服务器
- python - 将 pandas 中的句子拆分为句号和单词
- javascript - 如何在不输入所有属性的情况下获取所有 DynamoDB 属性