如何防止图片溢出容器？CSS布局图片超出边界解决方法

使用svg、jpg等所有格式图片时均出现容器溢出问题，以制作header模块为例，初始代码如下：

初始CSS代码 #

.container {
  width: 1024px;
  min-height: 300px;
  margin-left: auto;
  margin-right: auto;
}

header {
  height: 300px;
  display: flex;
  align-items: center;
}

初始HTML代码 #

<div class="container">
  <header>
    <div>
      <img src="https://via.placeholder.com/400/09f/fff.png" alt="" />
    </div>
    <nav>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </nav>
  </header>
</div>

运行上述代码时，图片会超出header容器边框。

img属于替换元素，默认按照自身原始尺寸渲染，现有代码仅给header设置了300px固定高度，既没有给图片设置尺寸约束，也没有给包裹图片的父级div设置高度限制；加上flex布局下替换元素的固有尺寸不会被默认收缩，示例中使用的占位图原始高度为400px，大于header设定高度，就会出现溢出。该问题和图片格式（svg/jpg/png等）无关，是浏览器默认渲染规则导致的。

• 基础适配方案：直接给图片设置高度约束，适配父容器高度，同时消除行内元素默认底部间隙

  header img {
    /* 高度和header高度匹配 */
    height: 100%;
    /* 宽度按原始比例自适应 */
    width: auto;
    /* 去掉img作为行内元素产生的底部3px左右的默认留白 */
    display: block;
  }
  

  如果需要更灵活的适配，可将height: 100%替换为max-height: 100%，图片高度小于容器时会保持原始尺寸，不会被强行放大。
• 固定区域适配方案：给图片包裹层设置尺寸限制，搭配object-fit控制图片展示效果，适合对图片展示区域有固定要求的场景

  /* 给图片的直接父容器设置和header一致的高度 */
  header > div:first-child {
    height: 100%;
  }
  header img {
    height: 100%;
    width: auto;
    /* 防止图片宽度过大横向溢出 */
    max-width: 100%;
    /* 保持图片比例完整展示，不会变形裁切；如果需要填满区域可替换为cover */
    object-fit: contain;
    display: block;
  }
  

注意：不要仅靠flex布局的自动收缩能力约束替换元素尺寸，所有img、video这类替换元素都建议显式设置尺寸规则，从根源避免溢出问题。

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