在网站制作和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
-
WordPress小程序开发教程WordPress和小程序开发教程网上挺多的,追格小编简单分享几个。
-
追格网址导航主题源码下载追格小站点评主题是一个互联网创新产品分享与点评导航主题。若不太理解,你也可以理解为是一个网址导航就好,哈哈哈。
-
微信小程序开源框架市面上有很多优秀的微信小程序开源框架,常见的多半是前端框架,比如:vant-weapp、wux-weapp、Taro等等。
-
WordPress主题插件制作教程之三分钟热度教程:WordPress插件制作教程WordPress主题插件制作教程之三分钟热度教程-WordPress插件制作教程
-
5款国产WordPress主题模版分享(含3款开源版)国产WordPress主题模版开发者很多,但开源的并不多见,优秀的付费主题模版也有不少,今天追格小编分享追格开发的几款主题,有兴趣的朋友可以看看。
-
追格主题(开源版)追格主题(基于WordPress开发),免费开源并支持二开。专为资源下载、资讯媒体、图文博客网站而设计,响应式布局且自带用户中心、点赞收藏评论、SEO、个人主页、文章目录等功能。
暂无评论,抢个沙发...