自定义着陆页Flex布局失效问题求助

问题核心原因 #

你的Flex布局看似失效、图片尺寸超预期，本质是两个关键问题：

1. 图片未做自适应限制：Flex子容器（.interiors div）的flex:1 1 23%已经分配了空间，但内部的<img>会以原始尺寸（900x600）渲染，直接撑破父容器，导致Flex空间分配逻辑失效。
2. 背景容器高度限制不合理：.bg设置height:100%，但页面总内容高度远超视口，会挤压下方图片行的空间，让布局看起来混乱。

分步修复方案 #

1. 让图片自适应Flex子容器

给图片添加样式，强制它占满父容器宽度并保持宽高比：

.interiors img {
    width: 100%;
    height: auto; /* 避免图片拉伸变形 */
    display: block; /* 消除图片底部默认空白间隙 */
}

2. 调整背景容器高度规则

把.bg的height:100%改为min-height:100vh，确保容器至少占满视口，同时能容纳所有内容：

.bg {
  background-image: url("/img/gibson-bg.jpg");
  min-height: 100vh; /* 替换原height:100% */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 15px; /* 可选：给内容加左右边距，避免图片贴边 */
}

3. 修复Logo容器高度溢出

.heading设置了height:100px，但内部2000x1600的Logo会撑破这个限制，挤占下方空间，需限制Logo高度：

.heading img {
    height: 100%;
    width: auto; /* 保持Logo宽高比 */
    display: block;
}

4. 按钮居中优化（匹配预期效果）

若要让按钮居中显示，给按钮容器添加样式：

.buttonContainer {
    margin: 30px 0; /* 上下间距 */
    text-align: center;
}
.button {
    /* 保持原有样式，新增margin:auto让按钮自身居中 */
    margin: 0 auto;
}

完整修复代码 #

CSS部分

body, html {
  height: 100%;
  margin: 0;
}

.bg {
  background-image: url("/img/gibson-bg.jpg");
  min-height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 15px;
}
.heading {
  background: #000;
  height: 100px;
}
.heading img {
    height: 100%;
    width: auto;
    display: block;
}
.button {
    color: white;
    border-radius: 50px;
    background-color: #1F4A5D;
    border: 2px solid white;
    display:block;
    padding: 20px 30px;
    text-decoration:none;
    margin: 0 auto;
}
.buttonContainer {
    margin: 30px 0;
    text-align: center;
}
.interiors {
    display: flex;
    column-gap: 15px;
    margin-top: 20px;
}
.interiors div {
    flex: 1 1 23%;
}
.interiors img {
    width: 100%;
    height: auto;
    display: block;
}

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="your-stylesheet.css"> <!-- 确保引入CSS文件 -->
</head>
<body>

<div class="bg">
    <div class="heading">
        <img alt="gibson logo" src="https://placehold.co/2000x1600">
    </div>
    <div class="buttonContainer">
        <a href="https://www.choicehotels.com/montana/great-falls/ascend-hotels/mt123" target="_blank" class="button">BOOK A ROOM TODAY</a>
    </div>
    <div class="interiors">
        <div><img src="https://placehold.co/900x600"></div>
        <div><img src="https://placehold.co/900x600"></div>
        <div><img src="https://placehold.co/900x600"></div>
        <div><img src="https://placehold.co/900x600"></div>
    </div>
</div>
</body>
</html>

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