通过css实现img自适应剪裁并居中适配

03月/16日/CSS教程/浏览 446

在网站制作和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、追格资讯列表的图文列表https://www.zhuige.com/news.html

2、追格社区的用户信息头像部分https://www.zhuige.com/bbs.html

3、酱茄主题首页的图片轮播及资讯列表https://pro.jiangqie.com/

4、酱茄主题(WordPress模板)专题列表中的图片 https://pro.jiangqie.com/special

发表评论

暂无评论,抢个沙发...

客服 工单