如何让Gridlex布局中的背景图片不超出div容器？

针对你遇到的背景图超出Gridlex容器且无法填满区块的问题，可以通过以下几步调整CSS解决：

1. 统一背景图样式并优化定位 #

将两个背景图类的公共样式提取，同时添加关键属性确保图片适配容器：

.bg-about1, .bg-about2 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; /* 让图片居中展示，减少不合理裁切 */
  height: 100%; /* 占满父级Gridlex列的高度 */
  overflow: hidden; /* 强制隐藏超出容器的图片部分 */
  box-sizing: border-box; /* 避免内边距/边框导致容器尺寸溢出 */
}

.bg-about1 {
  background-image: url('../images/about1.jpg');
}

.bg-about2 {
  background-image: url('../images/about2.jpg');
}

2. 确保Gridlex列高度统一 #

Gridlex的middle类会让列内容垂直居中，但可能导致列高度无法填满整行。需要强制列项拉伸至行高：

.grid .col-5_sm12-middle, .grid .col-7_sm12-middle {
  align-self: stretch; /* 让所有列高度与行内最高列保持一致 */
}

3. 移除固定高度限制 #

删掉原CSS中的min-height: 500px，固定高度会导致Gridlex行高度被强制拉伸，反而容易出现背景图溢出或适配问题，改用height:100%自适应行高即可。

修改后，背景图会完全填满对应的Gridlex区块，且不会超出容器范围，同时保持图片比例。

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