图片无法完全填满父级div，左右出现空白边如何解决？

问题原因 #

• 图片样式中的object-fit: contain是留白的核心原因：该属性会保持图片原始宽高比，完整显示整张图片，当图片和外层容器宽高比不匹配时，就会自动在两侧或上下生成空白，你看到的粉色区域就是这块留白。
• 仅给图片设置max-width: 100%、max-height: 100%无法强制图片占满容器，当容器比例和图片比例不一致时就会留空。
• 外层div设置的background-size: cover是背景图专属属性，对img标签插入的图片完全无效，属于冗余代码。

解决方案 #

修改img标签的样式即可，修复后的完整代码如下：

<div class="col-md-6 col-sm-6" style="background-color: pink; height: 270px; position: relative;">
    <img src="images/about.jpg" style="width: 100%; height: 100%; object-fit: cover;" />
    <div style="position: absolute; top: 19%; left: 13%; width: 80%;">
        <p style="font-size: 1.4em; color: #fff; margin: 0; line-height: 1.7em; font-weight: 300; text-transform: uppercase;">
            apple pay runs afoul of mcx, a group with a rival product.
        </p>
    </div>
</div>

调整说明 #

• 将max-width: 100%; max-height: 100%替换为width: 100%; height: 100%，强制图片铺满父容器的整个宽高区域
• 把object-fit: contain改为object-fit: cover：该属性会保持图片宽高比，缩放至完全覆盖容器，超出部分自动裁剪，不会产生空白
• 删除了外层div上无用的background-size: cover属性

如果接受图片拉伸、不需要保持原始比例，也可以把object-fit: cover换成object-fit: fill，可以完整显示整张图片且不留空白。

内容的提问来源于stack exchange，提问作者gomesh munda