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

最新推荐文章于 2024-07-05 09:52:23 发布

追格

最新推荐文章于 2024-07-05 09:52:23 发布

阅读量3.9k

点赞数 1

分类专栏： css 文章标签： css 前端追格社区追格

本文链接：https://blog.csdn.net/jiangqie/article/details/123550495

版权

本文介绍了如何通过CSS解决图文列表和用户头像因规格不一致导致的显示问题。采用二层结构，外层作为容器限制图片规格，内层图片层实现自适应显示。通过设置外层超出隐藏，内层图片自适应，确保图片无拉伸、压缩。文中提供了追格资讯列表和追格社区用户头像的页面实例作为参考。

摘要由CSDN通过智能技术生成

在网站制作和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主题模板

关注

专栏目录