在网站制作和WordPress模板设计中,有时候会碰到图文列表的资讯图片和用户列表中的用户头像,因为用户发的图片规格不一致导致显示比例不合适或者图片有拉伸,压缩的问题。我们可以通过一套二层结构完美解决这类问题。
html结构:
外层作为容器层,限制图片规格,内层是图片层,用作显示
<div class="news-cover">
<img src="../images/cover1.png" alt="图文资讯" />
</div>
css部分:
外层设置超出隐藏,内层做自适应适配
.news-cover {
height: 120px;
width: 180px;
overflow: hidden;
}
.news-cover img {
height: 100%;
width: 100%;
object-fit: cover;
}
页面实例可以参考以下几处:
1、追格资讯列表的图文列表追格资讯_追格小程序,圈子小程序,知识付费小程序,企业官网小程序,WordPress主题模板
2、追格社区的用户信息头像部分追格社区_追格小程序,圈子小程序,知识付费小程序,企业官网小程序,WordPress主题模板