未知大小的图片适应（保持宽高比且不超出）图片容器的CSS属性

假设我们本地代码中有一个宽*高为100px*100px的图片的容器元素

<div class="img-wrapper" style="width: 100px; height: 100px;">
    <img src="..." alt="待展示图片" />
</div>

 

如果图片不我们本地，而是属于其他人资源，那么图片的尺寸、大小对于我们来讲是不可控的。

这种情况下，如果我们想仅通过CSS就能让他人无论传入什么样的图片都可以良好适应代码中的 [class="img-wrapper"] 的元素的话，可以考虑使用 object-fit 属性（CSS3，IE11及以下有兼容性问题）

.img-wrapper img {
    width: 100%;
    object-fit: contain;
}

 

等多关于 object-fit 样式属性的介绍，可以查看 object-fit (css3)