图片保持比例居中显示
在项目中会遇到这种情况,将图片在一个区域中居中显示,保持图片的比例不变,其他区域用一定的颜色填充。实现的思路就是设置图片的最大宽度为外层div的宽度,图片的最大高度为外层div的高度,这样可以保证图片的比例不变。然后设置居中。具体实现如下。
一 html代码
<div class="photoItem">
<span></span>
<a href="#"><img src="8.png"></a>
</div>
最外层div就是显示图片的显示区域,8.png是需要显示的图片,未知大小。
二 css样式设置
.photoItem{display:table-cell;text-align:center;vertical-align:middle;width: 138px;height: 99px;background-color: #666666;}
.photoItem span{vertical-align:middle;height: 100%;display: inline-block;}
.photoItem img{vertical-align:middle;max-width: 138px;max-height: 99px;}
这里需要注意的是高度的垂直居中,加入了span这个元素,通过让span垂直居中,达到让图片垂直居中的目的。