如何不缩放居中任意大小图片，宽图超出窗口部分裁剪且无横向滚动条

• 宽高未知的图片在浏览器窗口中居中展示，不对图片进行任何缩放处理
• 若图片宽度大于浏览器宽度（该场景出现频率较高），裁剪超出窗口的图片部分而非缩放图片，同时页面不出现横向滚动条
• 实现优先级：纯CSS > PHP > JS，不推荐使用背景图方案

.banner-container {
  display: block;
  position: relative;
  height: 450px;
  overflow: hidden;
}
.banner {
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translateX(-50%);
}

<div class="banner-container">
<img class="banner" src="https://i.sstatic.net/ppDo7.png">
</div>

以下代码无需额外脚本即可满足所有需求：

/* 全局禁用横向滚动条，避免图片超出时触发滚动 */
body {
  overflow-x: hidden;
  margin: 0;
}
.banner-container {
  width: 100vw;
  /* 若不需要占满整个窗口高度，可自行修改为固定高度，比如450px */
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.banner {
  /* 水平+垂直居中，以图片中心对齐容器中心 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 覆盖浏览器默认img最大宽高限制，保证图片不被缩放 */
  max-width: none;
  max-height: none;
}

<div class="banner-container">
  <img class="banner" src="替换为你的图片地址" alt="图片说明">
</div>

实现逻辑说明 #

• 容器设置overflow: hidden，超出视口的图片部分直接裁剪，不会展示
• 通过绝对定位加transform偏移实现居中，不管图片原生尺寸多大，都始终保持核心内容在窗口中心
• 给图片设置max-width: none和max-height: none，避免部分浏览器默认的最大宽度限制导致图片被强制压缩
• 全局overflow-x: hidden彻底杜绝横向滚动条出现

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