如何在800px容器中水平居中1200px图片并保持原图尺寸

要实现1200px的图片在800px容器里水平居中且保持原图尺寸，别用max-width（它会强制图片缩到容器宽度），给你两种靠谱的实现方式：

方法一：margin + 容器溢出隐藏 #

给容器设置固定宽度和溢出隐藏，图片通过块级元素的左右自动margin实现居中：

.container {
  width: 800px;
  overflow: hidden; /* 隐藏容器外的图片部分 */
}
.container img {
  width: 1200px; /* 强制保持图片原始宽度 */
  margin: 0 auto;
  display: block; /* 块级元素才能生效margin:auto */
}

方法二：Flex布局实现 #

用flex的居中属性更简洁，容器设置flex布局后直接让内容水平居中：

.container {
  width: 800px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.container img {
  width: 1200px;
}

核心逻辑就是去掉max-width: 100%这个限制——它是导致图片被缩小到容器宽度的原因，强制图片保持1200px宽度后，通过margin自动或flex居中，容器的overflow:hidden会裁掉超出左右的部分，正好匹配你要的效果。

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