原图如下：

在开发中，想在固定的高度和宽度中显示不一样的图片时，就会出现压缩，导致图片最后显示不好看，以下提供几种方法进行调整：

一、position实现图片自适应

<div class="father1"><img src="../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg" alt=""></div>

css如下：

    .father1 {width: 300px;height: 400px;//修改这里即可border: 1px solid black;margin: 20px auto;position: relative;display: block;overflow: hidden;}.father1>img {position: absolute;top: 50%;left: 50%;display: block;transform: translate(-50%, -50%);height: 100%;}

最后结果显示：
隐藏了左右多余的图片，且做到了根据固定的高度和宽度进行自适应

二、padding补偿法

使用background-image实现图片自适应

 <div class="border_img"><div class="inline_img"></div></div>

.border_img {width: 300px;height: 400px;//修改宽高时，需要修改padding-top的值border: 1px solid #000;}.inline_img {padding-top: 133.3%;//使用高度除以宽度background-image: url('../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg');background-size: cover;background-position: center;}

结果显示：

三、图片以正方形显示

<style>.image-container1 {background: url('../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg') 50% 50% no-repeat;background-size: cover;background-repeat: no-repeat;width: 70px;height: 70px;}
</style>
<div class="image-container1"></div>

结果显示：

换为另一种实现方式为：

.image-container1 {/* 50% 50% 无法确认为是size还是position的值 */background-image: url('../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg');background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;width: 70px;height: 70px;//当然后续可以添加圆角，边框，使其显示为自己想要的形式/* border-radius: 50%; *//* border: 1px solid black; */}