首页 > 代码库 > 图片保持比例居中显示
图片保持比例居中显示
在项目中会遇到这种情况,将图片在一个区域中居中显示,保持图片的比例不变,其他区域用一定的颜色填充。实现的思路就是设置图片的最大宽度为外层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垂直居中,达到让图片垂直居中的目的。
图片保持比例居中显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。