欢迎光临
我们一直在努力
扫描二维码在手机上浏览
网站制作

CSS让图片在DIV中居中显示

我们在做网站的时候经常会用到缩略图,比如产品列表,缩略图肯定是有一个长宽值或长宽比的,如果让图片宽度100%,高度一定值,超出高度的隐藏不显示,这样的话图片显示不完整,可能你的客户是不同意的。如果宽度和高度都用固定值,那么图片可能就会变形显示,这样效果更差。

所有很多人会想,如果图片可以在外层DIV中自动缩放,并上下左右居中,这样就好了,其实这个效果实现起来也是非常简单的,其中有个前提是图片要放到背景中,而不是直接写到HTML里。然后给外层DIV一个固定宽高值(响应式布局可以高度值固定,宽度值用百分比),在给放图片背景的标签加一个 background-size: contain,当然,背景图片也设置一下 center。不说了,直接上代码:

<div class="imgbox" style="background: url(images/jjfa-1.jpg) no-repeat center;height: 216px;width:314px;border:1px solid #e5e5e5;background-size: contain;">
</div>

当然你也可以把样式写到css文件中,但是这样写的话后期程序获取数据的时候会比较方便

THE END
历史上的今天
三月
13
    哇哦~~~,历史上的今天没发表过文章哦
标签
喜欢就支持一下吧!!!
点赞0打赏分享
版权声明
本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。
转载请注明:文章转载自:灵阳星空 » CSS让图片在DIV中居中显示
本文标题:CSS让图片在DIV中居中显示
本文日期:本文发表于 2020/03/13 12:28:13,最后更新于 2020/03/13 12:28:13,如内容失效,请反馈给我们,谢谢!
本文地址: https://www.jsksky.com/css-to-center-pictures-in-div.html

网络臭虫

已发布416篇文章
吃得苦中苦,方为人上人,不卧薪藏胆,哪能苦尽甘来?点击进入我的网站了解更多有关我的信息。

评论 抢沙发

评论前必须登录!

 


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏