图片保持比例居中显示

Posted 2020-09-14 cooldream2009

在项目中会遇到这种情况，将图片在一个区域中居中显示，保持图片的比例不变，其他区域用一定的颜色填充。实现的思路就是设置图片的最大宽度为外层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垂直居中，达到让图片垂直居中的目的。