html元素
<div>
<img src="http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg">
</div>
实现方式一
利用新的css属性方法object-fit
div{
width:150px;
height:100px;
}
img{
width:100%;
height:100%;
object-fit:contain;
}
实现方式二
利用绝对定位和transform实现
div{
width:150px;
height:100px;
position:relative;
}
img{
position:absolute;
max-width:100%;
max-height:100%;
width:auto;
height:auto;
left:50%;
top:50%;
tranform:translateX(-50%);
transform:translateY(-50%);
}