img固定宽高，怎么解决不同尺寸图片变形的问题

Question

只能用img标签，不能用背景图的方式，因为很多图尺寸不一，图片会变形，怎么解决呢。
像背景图定位一样，不管是图片旁边留白，还是只显示图片一部分都可以，希望指导下，谢谢~

Answer 1

父盒子固定wh，设置相对定位，子盒子绝对定位，设置最大wh，上下左右值为0，margin:auto;这样可以解决不同图片在同一个盒子里垂直水平居中，又不让图片变形。

Answer 2

举个例子: https://codepen.io/HaoyCn/pen...

Answer 3

css 的 object-fit

Answer 4

父元素设置overflow：hidden。可行吗？

Answer 5

等比例缩放（字太少发不了）

Answer 6

i{

width: 130px;
height: 156px;
overflow: hidden;
display: table-cell;
vertical-align: middle;

}
i img{

max-width: 100%;（或者max-height: 100%;）
display: block;
margin: 0 auto;

}
<img src="" />

Answer 7

img {
    width: 100%;
    height: auto;
}

Answer 8

            .box{
                width: 300px;
                height: 300px;
                text-align: center;
                font-size: 0;
            }
            .box:before{
                display: inline-block;
                content: '';
                width: 0;
                vertical-align: middle;
                height: 100%;
            }
            .box img{
                vertical-align: middle;    
                max-width: 100%;  
                 max-height: 100%;     
            }
<div class="box">
            <img src="img/451e0f1.png"/>
</div>

Answer 9

图片只设置一个height=“100%”或者width不就行了