html - 在卡片上显示完整图像
问题描述
在这张卡片中,我给出了一个图像标签。当我运行代码时,图像的一半被隐藏了。我的例外是图像应该像这样覆盖卡:
.
所以请让我知道如何实现这一目标。
这是我的代码:
.section6-card1-diagonal {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-color: transparent;
width: 246px;
height: 406px;
border-color: lightgrey;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.cards1 {
border-bottom: 225px solid #846EB1;
border-left: 401px solid transparent;
position: absolute;
bottom: 0;
left: -155px;
}
<div class="card section6-card1-diagonal">
<h5>Dell Inspiron Heavy metallic Display</h5>
<img class="section4-image" src="https://i5.walmartimages.com/asr/726f43a4-2dbb-4340-adc1-ce798580ba23_1.c5ced9469e3036a57d81678e9ebd2f1d.jpeg" />
<div class="cards1">
</div>
</div>
解决方案
播放 width .section4-image 类以获得更好的样式
.section6-card1-diagonal {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-color: transparent;
width: 246px;
height: 406px;
border-color: lightgrey;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.cards1 {
border-bottom: 225px solid #846EB1;
border-left: 401px solid transparent;
position: absolute;
bottom: 0;
left: -155px;
}
.section4-image {
height: 55vh;
background-color: "red";
width: 52vh;
margin-left: 10%;
margin-top: 0%;
}
<div class="card section6-card1-diagonal">
<h5>Dell Inspiron Heavy metallic Display</h5>
<img class="section4-image" src="https://i5.walmartimages.com/asr/726f43a4-2dbb-4340-adc1-ce798580ba23_1.c5ced9469e3036a57d81678e9ebd2f1d.jpeg" />
<div class="cards1">
</div>
</div>
推荐阅读
- html - 输入类型电子邮件 - 删除默认样式
- python - 在 jupyter(Anaconda 3) 上安装 dlib
- vue.js - Vuetify:自适应 v-date-picker 宽度 v-dialog 和 v-menu
- python - pyplot 如何知道 pandas.DataFrame(...).cumprod().plot() 的输出所绘制的内容
- regex - 使用linux命令删除换行符
- javascript - 如何使用 Chart.js 在 Vue 中将计算属性与数据对象中 JSON 的数据一起用于时间轴
- postgresql - 使用 PostgreSQL 从 Well Known Text 创建 GeoJSON 输出
- node.js - 异步函数执行顺序错误
- r - 在r中绘制多条水平线
- node.js - 带有 Promise 的错误数据库触发云功能