我们在做网站的时候经常会用到缩略图,比如产品列表,缩略图肯定是有一个长宽值或长宽比的,如果让图片宽度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文件中,但是这样写的话后期程序获取数据的时候会比较方便
WordPress日记主要承接WordPress主题定制开发、PSD转WordPress、WordPress仿站以及以WordPress为管理后端的小程序、APP,我们一直秉持“做一个项目,交一个朋友”的理念,希望您是我们下一个朋友。如果您有WordPress主题开发需求,可随时联系QQ:919985494
相关文章
WordPress微信分享文章或页面时如何带上图片和摘要
平时我们在WordPress主题定制开发的时候经常会用到社交…wordpress主题开发中按用户注册时间排序
我们在wordpress主题开发过程中,经常会对用户开放注册…如何更加安全的更新WordPress最佳实践教程
如果您想访问WordPress最新功能并保持网站的安全运行,…WordPress订阅者或投稿者上传图片提示:抱歉,您不能添加附件到此文章。
一直以来关于WordPress投稿者无法上传图片的问题都困扰…如何使用GitHub开发WordPress主题或插件
由于最近一个客户和我们签订了一个深度合作协议,共同开发一个W…WordPress如何搜索包含某个关键词的分类?
最近在做一个WordPress主题的时候,用户提出了搜索分类…