使用flexbox布局时图片响应式、div对齐与padding设置异常问题

现存核心问题 #

• 图片无响应式效果，不同图片尺寸无法保持统一
• Flex布局下元素对齐偏移，无法按预期并排排列，padding设置效果不符合预期

代码错误点梳理 #

HTML语法错误 #

• 标签属性格式错误：class="firstImage"src=、class="light-img"src=这类写法中，class属性和src属性之间缺失空格，会导致浏览器无法正确识别属性
• 冗余闭合标签：.text2容器内的段落多写了一个</p>闭合标签，会打乱DOM结构解析逻辑
• 图片标签缺少有效alt属性值，影响可访问性

CSS逻辑错误 #

• 未全局设置盒模型规则：默认盒模型下padding会被额外加到元素宽度上，导致设置宽度+padding后元素总宽度超出预期，引发布局错位
• 图片样式缺失：仅给图片设置width:100%，未设置高度适配规则和裁剪规则，不同原生比例的图片会按自身比例拉伸，既无法统一尺寸，也容易出现变形
• Flex属性使用错误：给.lower容器设置align-content: center，该属性仅对多行换行的flex容器生效，单行flex容器的交叉轴对齐需要使用align-items属性
• Flex子项宽度未明确分配：桌面端.main容器下的.main-img未设置宽度占比，默认按原生图片宽度撑开，挤压右侧文本空间，导致元素无法按预期并排
• 媒体查询笔误：第二个断点写为786px，和前一个768px断点冲突，属于无效空规则
• 图片默认存在3px底部行内间隙，未做清除会导致容器高度计算偏差

修复后完整代码 #

HTML部分 #

<body>
  <div class="main">
    <div class="main-img">
      <img class="firstImage" src="https://www.amazingonly.com/wp-content/uploads/2013/04/images4-1728x1080.jpg" alt="装饰展示图">
    </div>
    <div class="text">
      <h2>Discover innovative ways to decorate</h2>
      <p class="para">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia repudiandae dolore iure laudantium fugiat fuga sunt unde voluptates et, quasi exercitationem eum consectetur. Doloremque, ab?</p>
       <div class="shop">Shop Now</div>
    </div>
  </div>
  <div class="lower">
    <div class="dark image">
      <img class="dark-img" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/Download-Free-Pictures-4k.jpg" alt="深色家具展示">
    </div>
    <div class="text2">
      <h3>About furniture</h3>
      <p class="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus ipsa, adipisci perspiciatis debitis magni sed possimus pariatur qui exercitationem fugiat iusto error ducimus, quos quis, eius earum tempore quibusdam laboriosam!</p>
    </div>
    <div class="light image">
       <img class="light-img" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/Download-Free-Pictures-4k.jpg" alt="浅色家具展示">
    </div>
  </div>
</body>

CSS部分 #

/* 全局盒模型修正，padding不会撑大元素宽度 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  line-height: 2rem;
}
/* 全局图片响应式规则 */
img{
  display: block; /* 清除图片默认行内间隙 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片按比例填充容器，不变形 */
}
/* 移动端默认样式 */
.text, .text2{
 padding: 2rem;
}
.text h2{
 font-size: 2rem;
 line-height: 2.5rem;
 margin-bottom: 1rem;
}
.para{
  margin-bottom: 1.5rem;
}
/* 桌面端响应式布局 */
@media screen and (min-width: 768px) {
  .main{
    display: flex;
    align-items: stretch; /* 同行子项高度自动撑满保持一致 */
  }
  .main-img{
    width: 60%;
  }
  .text{
    width: 40%;
    padding: 0 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 文本垂直居中 */
  }
  .lower{
    display: flex;
    align-items: stretch;
  }
  .text2{
    width: 40%;
    padding: 0 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dark, .light{
    width: 30%;
  }
}

修复效果说明 #

• 所有图片自动适配容器尺寸，按比例裁剪填充，不会出现拉伸变形，不同位置图片高度随父容器自动统一
• Flex布局下子项按6:4、3:4:3的宽度比例并排排列，同行元素高度保持一致，对齐无偏差
• padding设置被正确纳入元素宽度计算，不会出现内容溢出、布局错位问题
• 文本块自动垂直居中，和参考效果布局逻辑一致

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