在网站制作和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 REST API暴露用户名?这里有一个简单的屏蔽方法!在深入探讨WordPress REST API的利用与功能时,追格小编虽已分享了多篇相关内容,但我们依然理解,部分用户可能仍对网站用户名暴露的问题心存顾虑,尤其是当他们并不需要使用到如古腾堡编辑器或小程序等特定功能时。针对这一关切,今天小编特地为大家介绍一种有效的屏蔽方法。
-
从服务器到本地:如何利用Studio和Local在本地开发WordPress网站在WordPress建站时,很多同学可能习惯于直接上传代码到服务器进行安装。但如果你想要更快速地开发和测试网站,搭建本地开发环境是个关键步骤。
-
WordPress圈子到底怎么了...话说,国内WordPress圈子是否还有新的发展机遇?这个充斥着同质化产品和激烈内卷的市场中,如何在价格和功能的差异化上寻求突破,为圈子注入新的活力,是开发者不得不面对的问题。
-
重塑WordPress生态的思考与探索前两天的《WordPress圈子到底怎么了...》这篇文章大家都挺有感触的,群里聊得热火朝天。里头啥声音都有:有的哥们儿直接吐槽WordPress性能拖后腿,躲都躲不及;有的则感慨流量难搞,但坚持建站纯粹是出于热爱和那份情怀;还有人预言,以后建站啊,模块化、可视化才是王道;较热闹的还得数短视频和直播,这家伙一来,内容消费整个儿变了天,网站和小程序怎么赚钱都成难题了。
-
WordPress企业主题近期,国内WordPress社群似乎进入了一段相对宁静的时期,无论是活跃的用户群体还是勤勉的开发者们,都呈现出一种沉稳的态势。在这样一个略显静谧的时刻,追格团队选择利用这段时间沉潜下来,专心致志地精进自身的产品,力求在每一个细节上都追求完善,以备在不久的将来,以更加超凡脱俗的面貌回馈给广大用户与开发者。
-
Loco Translate 一款专为WordPress设计的翻译插件WordPress Loco Translate是一款专为WordPress用户设计的翻译插件,它简化了主题和插件的多语言翻译过程。
暂无评论,抢个沙发...