通过CSS让图片在DIV中上下左右居中显示

概述我们在做网站的时候经常会用到缩略图，比如产品列表，缩略图肯定是有一个长宽值或长宽比的，如果让图片宽度100%，高度一定值，超出高度的隐藏不显示，这样的话图片显示...

我们在做网站的时候经常会用到缩略图，比如产品列表，缩略图肯定是有一个长宽值或长宽比的，如果让图片宽度100%，高度一定值，超出高度的隐藏不显示，这样的话图片显示不完整，可能你的客户是不同意的。如果宽度和高度都用固定值，那么图片可能就会变形显示，这样效果更差。所有很多人会想，如果图片可以在外层div中自动缩放，并上下左右居中，这样就好了，其实这个效果实现起来也是非常简单的，其中有个前提是图片要放到背景中，而不是直接写到HTML里。然后给外层div一个固定宽高值（响应式布局可以高度值固定，宽度值用百分比），在给放图片背景的标签加一个 background-size: contain，当然，背景图片也设置一下 center。不说了，直接上代码：

<div background: url(images/jjfa-1.jpg) no-repeat center;height: 216px;wIDth:314px;border:1px solID #e5e5e5;background-size: contain;">

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

总结

以上是内存溢出为你收集整理的通过CSS让图片在DIV中上下左右居中显示全部内容，希望文章能够帮你解决通过CSS让图片在DIV中上下左右居中显示所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。