2016年3月5日02:45:30 更新 一个很好的css属性:object-fit:cover 设置好宽度和高度,图片会自动居中显示,占满宽度和高度并且不变形~ 在电脑chrome和苹果上显示正常,但是安卓4.4好像有些问题~


经常会用到图片缩略图要居中显示,不然要么自适应宽度,要么自适应高度。

遇到宽度比较大的,自适应后高度可能有空白。

用max-width的方法不太好用。

网上很多用jquery实现图片居中的略麻烦,这里用css3来解决这个问题。同样可以用到div的水平垂直居中,在一些遮罩层经常用到!

div容器的css样式

width: 80px; height: 80px; overflow: hidden;

img标签的css样式

width: auto; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

实例:最终效果图

QQ截图20151216094648