在放置图片的时候，直接将图片完全适应盒子会使图片拉伸变形，很不美观
① 通过object-fit: cover可以让图片覆盖式填充，就相当于把一张纸直接放到了桌子上，不会拉伸或压缩图片
② 如果桌子放不下这张纸，那么可以通过 object-position: 左边距 上边距 控制纸放在桌子上的位置
如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box"><img src="https://www.enjoying3d.com/upload/thing12/1248134/20220502110702-1.jpg"></div>
</body>
<style>.box {width: 400px;height: 400px;background-color: green;}.box img {width: 100%;height: 100%;/* 设置图片平铺 */object-fit: cover;/* 设置图片摆放位置 */object-position: 10px 10px;}
</style>
</html>这样设置之后就保持了原先的宽高比
