flex布局下img设置max-width:100%挤压元素溢出页面如何解决

问题现象 #

开发移动端可缩放图片效果时，陆续遇到以下异常：

• 初始给图片设置max-width: 100%、height: auto属性后，同级文本内容被挤压到屏幕可视区域外
• 尝试给文本容器设置width: 66%修复挤压问题，配置未生效
• 调整方案给图片设置width: 33%后，height: auto属性又造成图片比例失真、被拉伸变形

问题复现代码 #

CSS部分 #

.bodyAboutMe {
  background-color: #1e1e1e;
  text-align: center;
  justify-content: space-between;
  padding: 10px 100px;
  color: white;
  display: flex;
}

.bodyAboutMe img {
  max-width: 100%;
  height: auto;
}

.textAboutMe {
  width: 66%;
  padding-left: 20px;
}

.bodyAboutMe h1 {
  padding-top: 25px;
  font-family: 'AboutMeFont';
  letter-spacing: 4px;
  font-size: 1000%;
}

.bodyAboutMe p {
  padding: 50px 150px;
  font-size: 150%;
}

HTML部分 #

<section class="bodyAboutMe">
  <img src="images/20210926_071241.jpg">
  <div class="textAboutMe">
    <h1>About Me</h1>
    <p>about me text</p>
  </div>
</section>

问题根因 #

• 父容器开启display: flex后，子项默认属性为flex-shrink: 1，空间不足时会自动收缩。图片作为flex子项没有设置明确的宽度基准，加载时会优先占据可用空间挤压文本容器，直接给文本设置的width: 66%会被flex的默认收缩规则覆盖，无法生效。
• 给图片设置固定width: 33%后比例失真，是因为没有给图片设置匹配的盒模型规则，图片实际渲染宽度会受自身原始尺寸、父容器内边距影响，和设置的宽度值不匹配，height: auto按原始宽高比计算高度时就会出现拉伸。
• 文本内容里的标题、段落设置了超大字号和超大左右内边距，移动端下也会加剧内容溢出的问题。

修复方案 #

给两个flex子项明确设置flex基准值，添加盒模型规则避免宽度计算异常，同时补充移动端媒体查询，调整小屏设备下的布局方向、内边距和字号：

.bodyAboutMe {
  background-color: #1e1e1e;
  text-align: center;
  justify-content: space-between;
  padding: 10px 100px;
  color: white;
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.bodyAboutMe img {
  /* 固定图片占33%容器宽度，禁止收缩放大 */
  flex: 0 0 33%;
  width: 100%;
  height: auto;
  /* 保持图片比例，裁剪超出部分 */
  object-fit: cover;
}

.textAboutMe {
  /* 文本占剩余宽度，扣除左侧内边距避免溢出 */
  flex: 0 0 calc(66% - 20px);
  padding-left: 20px;
  box-sizing: border-box;
}

.bodyAboutMe h1 {
  padding-top: 25px;
  font-family: 'AboutMeFont';
  letter-spacing: 4px;
  font-size: 1000%;
}

.bodyAboutMe p {
  padding: 50px 150px;
  font-size: 150%;
}

/* 小屏移动端适配 */
@media (max-width: 768px) {
  .bodyAboutMe {
    /* 小屏改为上下排列 */
    flex-direction: column;
    padding: 10px 20px;
  }
  .bodyAboutMe img, .textAboutMe {
    flex: none;
    width: 100%;
    padding-left: 0;
  }
  .bodyAboutMe h1 {
    font-size: 300%;
  }
  .bodyAboutMe p {
    padding: 20px;
    font-size: 100%;
  }
}

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