Post

用CSS3使图片在容器内垂直水平居中

////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

对比:这个是宽度高度auto的
QQ截图20151216095137

对比:这个是固定宽度高度的
QQ截图20151216095227

对比:这个是宽度高度最大80px的
QQ截图20151216095244

Leave a Reply

  • 评论1则,共1页,当前第1