问题：
img标签宽高固定的情况下，上传的图片尺寸不一致，会导致图片被拉伸变形，影响页面美观。
解决方法：
用css3的object-fit 属性、object-position 属性可以解决，代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>img标签图片自适应的样式</title><style>body {display: flex;justify-content: center;}.img {width: 300px;height: 300px;border: black 1px solid;background-color: darkgrey;}/* 图片自适应的样式 */.img-object{object-fit: cover;object-position: 50% 20%;}</style>
</head>
<body><div style="height: 350px;margin-right: 50px;"><h4>图片没有自适应: </h4><img class="img" src="./21.jpg"></div><div style="height: 350px;"><h4>图片自适应：</h4><img class="img img-object" src="./21.jpg"></div>
</body>
</html>
拓展：
object-fit 属性、object-position 属性的其他属性值及描述可参考： object-fit链接 object-position链接
自适应前后图片对比：
