如何实现响应式图片等高且保持原有宽高比例？

可以同时实现等高、保持宽高比、响应式适配三个需求，核心使用CSS原生object-fit属性即可实现。

实现逻辑 #

• 保留height: 70vh配置保证所有图片等高
• 新增object-fit: cover属性，让图片自动维持原始宽高比，缩放后填满容器，超出部分自动裁剪，完全避免拉伸变形
• 设置width: 100%配合父级Bootstrap响应式栅格，自动适配不同屏幕宽度

修改后的CSS代码 #

.first-row div img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    /* 可选：调整裁剪显示位置，默认是center居中，可设置为top/bottom/left/right等 */
    /* object-position: center; */
    /* 可选：如果不需要裁剪，希望完整显示图片，可换成以下配置，容器多余区域会自动留白 */
    /* object-fit: contain; */
}

该属性兼容所有主流现代浏览器，无需额外兼容处理，若需兼容IE11可使用背景图方案做降级适配。

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