图片适配父容器时拉伸，如何保持响应式且不丢失图片宽高比？

你现有代码中给img同时设置width: 100%和height: 100%会强制拉伸图片适配父容器尺寸，直接忽略图片原始宽高比，是导致变形的核心原因。可以通过CSS的object-fit属性解决该问题：

• 调整img样式，保留原有宽高设置，新增object-fit规则控制缩放逻辑，常用可选项：
  • contain：图片完整显示在父容器内，严格保留宽高比，容器多余区域会出现空白
  • cover：图片完全填充满父容器，严格保留宽高比，超出容器的部分会被裁剪
• 确保包裹img的RegionSelect组件撑满父容器尺寸，避免适配层级异常

注意：如果你使用contain模式，需要将图片在容器内的实际渲染尺寸、偏移量同步给RegionSelect组件，避免bounding box的坐标计算出现偏差。

修改后的示例代码如下：

<div style="width: 65%; height: 40vh;">
  <RegionSelect style="width: 100%; height: 100%;">
    <img src="image-src-here" alt="" style="width: 100%; height: 100%; object-fit: contain;"/>
  </RegionSelect>
</div>

把object-fit的取值替换为你需要的cover等其他值即可实现对应效果。

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