如何让图片始终保持100%高度居中，仅裁剪/扩展两侧？

我明白你的痛点——现有的示例要么没法维持100%高度导致底部截断，要么窄窗口时只裁右侧，完全不符合你想要的两侧居中裁剪效果。别担心，用CSS就能轻松搞定这个需求，下面给你两种可靠的实现方案：

核心思路拆解 #

要实现你的需求，关键要做到三点：

• 强制图片高度始终占满容器（比如整个视口）
• 图片保持原有比例缩放，宽度自适应
• 图片水平居中，超出容器宽度的部分两侧均匀裁剪

方案一：Flexbox布局（简洁易维护） #

这种方式利用Flex的居中特性，代码简洁且兼容性好：

完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 清除默认边距，避免影响布局 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .image-wrapper {
      /* 占满整个视口的高度和宽度 */
      width: 100vw;
      height: 100vh;
      /* 隐藏超出容器的图片部分 */
      overflow: hidden;
      /* Flex布局实现水平居中 */
      display: flex;
      justify-content: center;
    }

    .image-wrapper img {
      /* 强制图片高度占满容器 */
      height: 100%;
      /* 宽度自适应，保持图片比例 */
      width: auto;
    }
  </style>
</head>
<body>
  <div class="image-wrapper">
    <img src="你的图片地址" alt="需要展示的图片">
  </div>
</body>
</html>

方案二：绝对定位方案（兼容性更强） #

如果你需要兼容更老的浏览器，绝对定位的方式更稳妥：

完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .image-wrapper {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      /* 父容器设为相对定位，作为图片定位的参考 */
      position: relative;
    }

    .image-wrapper img {
      position: absolute;
      top: 0;
      /* 先让图片左边缘居中 */
      left: 50%;
      /* 再向左偏移自身宽度的50%，实现完全水平居中 */
      transform: translateX(-50%);
      height: 100%;
      width: auto;
    }
  </style>
</head>
<body>
  <div class="image-wrapper">
    <img src="你的图片地址" alt="需要展示的图片">
  </div>
</body>
</html>

额外：背景图实现方案 #

如果你的图片是用作背景，也可以直接用CSS背景属性实现，代码更简洁：

.image-wrapper {
  width: 100vw;
  height: 100vh;
  /* center center 实现水平垂直居中；auto 100% 保证高度占满，宽度自适应 */
  background: url('你的图片地址') center center / auto 100% no-repeat;
}

效果验证 #

• 当窗口宽度大于图片宽度时：图片高度100%，水平居中显示，左右两侧会留有空白（这是正常的，因为要保证高度优先）
• 当窗口宽度小于图片宽度时：图片高度保持100%，超出容器的左右部分会被均匀裁剪，完美实现你要的两侧裁剪效果
• 窗口缩放时：图片会自动等比例调整，始终保持100%高度且居中，彻底解决示例1的底部截断和示例2的单侧裁剪问题

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