通过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文件中，但是这样写的话后期程序获取数据的时候会比较方便