图片布局解决方案：object-fit

在日常开发中图片的布局往往令开发者比较头疼，要实现响应式也是很麻烦，要是客户的图片再非常的不规整，容易使图片长宽被拉伸，很不好看。这时就可以用到object-fit属性。 假设这里有三张图片

可以看出图片大小不一，如果需要定高设置，img的height为100%。但是这时发现图片被拉伸。

如果设置图片地object-fit:cover

甚至可以配合object-position和过渡使用

完整代码示例：

Document

.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; }