嘿，我明白你想要的效果：容器宽大于高时，图片跟着容器高度走；容器高大于宽时，图片跟着宽度走，而且小图也要拉满对应尺寸还不跑比例对吧？你现在的代码只处理了宽度100%的情况，自然没法适配高度优先的场景，我给你整理了两种方案，看你需求选：

方案一：图片完全覆盖容器（裁剪超出部分） #

这个方案适合需要图片填满容器，不管宽高比差异，只保证图片自身比例不变，超出容器的部分自动隐藏。

完整代码 #

HTML

<div class="img-container">
  <img src="https://i.pinimg.com/236x/73/24/05/7324050b8a2c7f22e1134d08bbc8e6e1--entrance-table-entry-tables.jpg" alt="Entryway table">
</div>

CSS

.img-container {
  max-height: 300px;
  overflow: hidden;
  /* 让容器宽度自动适配图片，若要容器占满父元素宽度，替换为 width: 100% */
  width: fit-content;
}

.img-container img {
  display: block;
  /* 强制图片填满容器的宽高范围 */
  width: 100%;
  height: 100%;
  /* 保持图片宽高比，填满容器，超出部分裁剪 */
  object-fit: cover;
  /* 确保小图也能拉伸至容器尺寸，避免留白 */
  min-width: 100%;
  min-height: 100%;
}

方案二：图片完整显示（不裁剪，居中展示） #

如果希望图片完整呈现在容器内，仅根据容器宽高比自动适配最长边，空余区域留白并居中图片，就用这个方案：

CSS

.img-container {
  max-height: 300px;
  overflow: hidden;
  width: fit-content;
  /* 让图片在容器内水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-container img {
  /* 图片最大尺寸不超过容器的宽高限制 */
  max-width: 100%;
  max-height: 100%;
  /* 小图拉伸至容器的最大可用尺寸 */
  min-width: 100%;
  min-height: 100%;
  /* 保持图片比例，完整显示在容器内 */
  object-fit: contain;
}

关键逻辑说明 #

• object-fit: cover/contain是核心：帮你精准控制图片的缩放逻辑，在保证宽高比的同时适配容器
• min-width/min-height: 100%解决小图适配问题：哪怕原图尺寸小于容器，也能自动拉伸至容器尺寸，不会出现留白
• width: fit-content让容器宽度自适应：当容器高度为限制项时，容器宽度会自动匹配图片按比例缩放后的宽度；若需要容器占满父元素宽度，直接替换为width: 100%即可

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