网站颜色搭配网站,网页小游戏斗地主,wordpress防止采集插件,网站建设做到哪些内容场景#xff1a;展示图片列表的时候#xff0c;原始图片宽高不一致。 外层div的宽度自适应#xff0c;图片宽度不能固定数值#xff0c;只能设置百分比。图片高度也不能设置固定数值。 如何让图片的高度与图片的宽度一样呢#xff1f; html代码 #xff1a;
div cl… 场景展示图片列表的时候原始图片宽高不一致。 外层div的宽度自适应图片宽度不能固定数值只能设置百分比。图片高度也不能设置固定数值。 如何让图片的高度与图片的宽度一样呢 html代码
div classboxdiv classfather-imgimg srcimg.png alt商品详情/divdiv classdesc-info100/div
/div
css代码
.box{width:calc((100% - 64px) / 4); /* 最外层div宽度自适应 */
}.father-img {position: relative;width: 100%; /* 容器宽度 */height: 0; /* 容器高度 */padding-bottom: 100%; /* 这里的百分比值应与图像宽度相同 */
}
.father-img img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;/*object-fit属性可设置为cover、contain等和background-size是一样的值。*/object-position: center;/*object-position属性可设置为center、left等和background-position是一样的值。*/
}
最终效果图 img标签实现background-size:cover图片拉伸、缩放等效果 object-fit: cover;/*可设置为cover、contain等和background-size是一样的值*/ object-position: center;/*可设置为center、left等和background-position是一样的值*/
