如何让固定高度图片适配无固定宽度容器，避免水平溢出

无需使用媒体查询，仅调整图片的CSS规则即可实现需求，调整后的完整代码如下：

.card {
  width: fit-content;
  max-width: 100%;
  background-color: lightgray;
  padding: 1em;
}

img {
  max-height: 13em;
  width: auto;
  max-width: 100%;
  /* 可选：消除行内元素默认底部留白 */
  display: block;
}

效果说明 #

• 视口宽度充足时：图片高度自动撑满13em，宽度按图片固有比例自适应，卡片尺寸跟随图片尺寸，最大宽度不超过视口宽度
• 视口宽度不足时：max-width: 100% 规则生效，限制图片宽度不超过父容器宽度，高度会自动按图片比例缩小，全程不会出现变形、水平溢出的问题

如果你的场景需要固定卡片高度始终为13em，仅缩小图片内容保证完整展示，可以使用以下图片规则：

img {
  height: 13em;
  width: 100%;
  /* 等比缩放图片，保证完整展示在容器内 */
  object-fit: contain;
}

该规则下图片高度始终为13em，窄屏时图片会等比缩放后居中展示，上下会出现等宽留白。

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