如何使含图片的Div同时适配容器宽度与屏幕高度？

没问题！要让图片同时适配容器的宽高，我们只需要调整几个CSS属性，同时确保高度约束能从最外层容器传递到图片，还能避免图片拉伸变形。下面是具体的解决方案：

问题分析 #

你现有代码里已经实现了图片宽度适配，但高度没生效，核心原因是：

• 父元素（.module、button）没有明确的高度约束，图片高度只能遵循自身比例
• .rack缺少对应布局属性，导致.module的table-cell没发挥作用，布局可能不符合预期

修改后的完整代码 #

CSS 代码

.cabinet {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.rack {
  display: table; /* 让内部table-cell横向排列 */
  width: 100%;
  height: 100%; /* 继承cabinet的高度分配 */
  table-layout: fixed; /* 让每个module平分宽度 */
}
.module {
  display: table-cell;
  height: 100%; /* 填满rack的高度 */
}
.module button {
  border-color: black;
  border-style: solid;
  border-width: thin;
  width: 100%;
  height: 100%; /* 填满module的空间 */
  padding: 0; /* 移除按钮默认内边距，避免图片周围留白 */
}
.module img {
  width: 100%;
  height: 100%; /* 强制图片填满按钮容器 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分填满容器 */
  /* 如果希望完整显示图片（可能留空白），可以替换为 object-fit: contain; */
}

HTML 代码（无需修改）

<div class="cabinet">
  <div class="rack">
    <div class="module">
      <button>
        <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
      </button>
    </div>
    <div class="module">
      <button>
        <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
      </button>
    </div>
    <div class="module">
      <button>
        <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
      </button>
    </div>
    <div class="module">
      <button>
        <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
      </button>
    </div>
  </div>
  <div class="rack">
    <div class="module">
      <button>
        <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
      </button>
    </div>
    <div class="module">
      <button>
        <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
      </button>
    </div>
    <div class="module">
      <button>
        <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
      </button>
    </div>
    <div class="module">
      <button>
        <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
      </button>
    </div>
  </div>
</div>

关键修改说明 #

1. .rack 布局修正：添加display: table和table-layout: fixed，让四个.module横向平分宽度，同时继承父容器的高度。
2. 高度约束传递：给.module、button都设置height: 100%，确保高度能一直传递到图片元素。
3. 图片适配控制：给img添加height: 100%，并用object-fit: cover保证图片填满容器的同时，保持原有比例（不会拉伸变形）。如果需要完整显示图片（容器可能出现空白边），可以换成object-fit: contain。

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