我们在做网站的时候经常会用到缩略图,比如产品列表,缩略图肯定是有一个长宽值或长宽比的,如果让图片宽度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文件中,但是这样写的话后期程序获取数据的时候会比较方便
© 版权声明
这些信息可能会帮助到你: 下载帮助 | 免责说明 | 进站必看 | 广告投放
版权声明:本文采用知识共享 署名4.0国际许可协议 BY-NC-SA 4.0 进行授权文章名称:《CSS让图片在DIV中居中显示》
文章链接:https://www.jsksky.com/css-to-center-pictures-in-div.html
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,部分软件收费或网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。
THE END
请登录后发表评论
注册
社交帐号登录