在日常开发中图片的布局往往令开发者比较头疼，要实现响应式也是很麻烦，要是客户的图片再非常的不规整，容易使图片长宽被拉伸，很不好看。这时就可以用到object-fit属性。 假设这里有三张图片
可以看出图片大小不一，如果需要定高设置，img的height为100%。但是这时发现图片被拉伸。
如果设置图片地object-fit:cover
甚至可以配合object-position和过渡使用
完整代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 100px auto;
height: 300px;
width: 90%;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.content {
width: 32%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
transition: object-position 1s ease-in-out;
}
img:hover {
object-position: right;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<img src="city.jpg" alt="">
</div>
<div class="content">
<img src="fish.jpg" alt="">
</div>
<div class="content">
<img src="view.jpg" alt="">
</div>
</div>
<script src="index.js"></script>
</body>
</html>