如何调整响应式图片高度且不裁剪内容、保持原有宽度

你使用的img-responsive是Bootstrap框架的内置响应式图片类，其默认CSS规则包含height: auto !important，优先级远高于HTML标签原生的height属性，因此直接给img标签加height属性不会生效。

按照「保持响应式、原有宽度不变、无内容裁剪」的需求，可通过新增自定义CSS规则实现：

1. 给img标签新增一个自定义类名，示例中为custom-height-img，修改后的HTML代码如下：

<section>
    <img src="me.jpg" alt="me" class="img-responsive center-block custom-height-img">
</section>

2. 新增对应CSS规则：

/* 可根据需求调整高度值，需要响应式高度可换成vh、rem等相对单位 */
.custom-height-img {
  height: 300px !important;
  width: 100% !important;
  object-fit: contain;
  object-position: center;
}

• !important 用于覆盖Bootstrap内置的height: auto规则，确保自定义高度生效
• width: 100% 保持原有响应式宽度特性，不会改变原有的宽度适配逻辑
• object-fit: contain 强制图片按原始宽高比缩放，完整放入设定的宽高容器内，不会出现裁剪或拉伸变形
• object-position: center 可选，保证图片在容器内居中显示，避免出现留白偏移

如果使用的是Bootstrap 5版本，对应的响应式图片类为img-fluid，上述解决方案逻辑完全通用，仅需替换对应类名即可。

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