图片等比例缩放居中显示

如果不想用前面的后台图片缩放预处理上传的图片,在使用上传图片时可能会出现与预期的效果不一致的情况,可能我们想到要固定图片的尺寸,但是如果上传的尺寸比例与设定的不一致,又会让图片变形,下面使用一个简单的方法实现图片的等比例缩放并居中显示,只需要HTML+CSS,就可以

 

<div class="divcss5"><span>
<img src="http://picm.bbzhi.com/youxibizhi/jipinfeiche114/jingxuan_yxjx_214817_m.jpg" /></span>
</div>
		16:9
		
		
		
<div class="divcss5"><span>
			<img src="http://image14-c.poco.cn/mypoco/qing/20130316/12/1803925951717609824_500x750_220_260.jpg" /> </span>
</div>
		4:6
<div class="divcss5"><span>
			<img src="http://i6.download.fd.pchome.net/t_960x600/g1/M00/06/09/oYYBAFJI7sWIPNyWAAQPGMRlIYwAAA6mAHezLcABA8w121.jpg" /> </span>
</div>
		5:4

 

 CSS代码

    .divcss5 {
        border: 1px solid #000;
        width: 300px;
        height: 300px;
        text-align: center;
				display:table;
	background:#fff
	
    }
.divcss5 span{
display:table-cell;
    vertical-align:middle;
}
      

        .divcss5 img {
            max-width: 300px;_width: expression(this.width > this.height ? "300px" : this.width);
            max-height: 300px;_height: expression(this.height > this.width ? "300px" : this.height);
            vertical-align: middle;
	
        } 

 

这样在预览的时候就可以看到图片是按照指定的尺寸等比例的缩放了