如何处理图片变形

<div class="father">
    <img src="xxxxx.jpg"/>
</div>
<style>
.father{
    width: 300px;
    height: 300px;
    overflow: hidden;
    /* position: relative;*/
}
.father img{
    display: block;
    width: 300px;
    /* 如果需要图片居中的话
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */
}
</style>

这样图片就多余的就能被父容器裁剪掉(overflow:hidden),另外还可以做居中处理,这样能够达到在图片未知宽高的时候尽最大可能的适配,同时不拉伸变形图片