Div内图片无法填满容器的CSS问题及响应式适配诉求

核心问题分析 #

当前代码中，图片的height: auto会维持原始比例，无法填充容器垂直空间；同时父元素（.wp-block-column、.wp-block-image）存在默认内边距/外边距，且无明确高度约束，导致图片无法撑满容器。

解决方案代码 #

1. 让列容器占满可用高度 #

给列容器添加高度约束与flex布局，确保内部元素能撑满空间：

@media (min-width: 782px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    height: 100%; /* 让列占满父容器高度 */
    display: flex; /* 用flex布局让内部figure自动撑满 */
    flex-direction: column;
  }
}

2. 清除figure默认间距并撑满容器 #

移除WordPress区块图片的默认外边距，让它占满列容器：

.entry-content .wp-block-image {
  margin: 0; /* 清除默认外边距 */
  height: 100%; /* 让figure占满列的高度 */
}

3. 修改图片样式强制填充容器 #

替换height:auto为height:100%，配合object-fit保持比例的同时填满容器：

.entry-content .wp-block-image img {
  max-width: 100%;
  width: 100%;
  height: 100%; /* 让图片撑满figure高度 */
  object-fit: cover; /* 维持图片比例，裁剪多余部分 */
  object-position: center; /* 可选：设置图片裁剪时的对齐位置，比如人物居中 */
}

效果说明 #

• 桌面端（≥782px）：列容器占满父级高度，内部figure与图片依次撑满空间，object-fit:cover保证图片比例不变且无留白。
• 移动端：保持堆叠布局，图片宽度100%、高度自适应，维持响应式特性。

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