首页 > 代码库 > 图片保持比例居中显示

图片保持比例居中显示

在项目中会遇到这种情况,将图片在一个区域中居中显示,保持图片的比例不变,其他区域用一定的颜色填充。实现的思路就是设置图片的最大宽度为外层div的宽度,图片的最大高度为外层div的高度,这样可以保证图片的比例不变。然后设置居中。具体实现如下。

一 html代码

<div class="photoItem">

<span></span>

<a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/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垂直居中,达到让图片垂直居中的目的。

图片保持比例居中显示