现在有个需求，是一个定宽定高的div标签里面有个img，要求自适应，但又要求缩放的时候比例保持不变。使用场景还挺多，在部分有图片上传的应用上，如何统一的显示图片？毕竟上传的图片宽高及比例各不相同，如果拉伸的话会导致图片很奇怪，而保持原有大小又会出现图片太大溢出的情况，我研究了一下如何解决这个问题，下面是解决方案。
下面是效果图
效果图
无论图片比例多少都能显示在固定宽高的容器里面。
hjbook.png
问题图
有问题的图
修正后
![QT5895ITFAR]_1NT92DR_Y1.png](https://img.haomeiwen.com/i1681524/496a176ec575dc24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
scss代码
.book-details-profile-img {
height: 135px;
width: 108px;
img {
object-fit: contain;
height: 100%;
width: 100%;
}
}
兼容性问题
参考can i use
反正现代浏览器都能用，我基本不考虑兼容性。
后话
明天(6月15日)整理下object-position和object-fit还有替换元素(replaced elements)
网友评论