CSS overflow可滚动容器中居中图片放大后无法完整显示原因咨询

这是Flex布局实现居中效果时的经典裁切异常，由Flex默认排版规则和滚动溢出计算逻辑共同导致，和图片本身的尺寸设置没有关系：

• 当容器设置display: flex，搭配justify-content: center（水平居中）、align-items: center（垂直居中）时，Flex的默认对齐逻辑是：子元素尺寸小于容器时，把剩余空白空间平均分到子元素两侧，以此实现居中效果。
• 一旦子元素尺寸超过容器可容纳范围，这套逻辑不会自动调整为「仅从排版结束方向溢出内容」，反而会把超出的尺寸从子元素两侧同步裁切：水平方向上把超出的宽度平均分到左侧、右侧的容器可视区域外，垂直方向上把超出的高度平均分到上侧、下侧的容器可视区域外。
• 这种双向裁切的位置是负偏移的，浏览器在计算overflow: auto的滚动范围时，会漏掉这部分被裁切到可视区域外的内容，最终表现为图片显示不全，也无法通过滚动找到被遮住的部分。
• 而取消居中、让图片靠左上角对齐时，图片作为块级内容默认从容器的排版原点（左上角）开始排列，所有超出容器的尺寸都会向右、向下延伸，完全纳入浏览器的滚动范围计算内，因此可以完整展示、正常滚动查看。

这类问题的常见修复方案：

• 将容器的居中对齐值替换为safe center，也就是把对齐规则改为justify-content: safe center、align-items: safe center：当子元素尺寸溢出容器时，会自动回退为左上角对齐，不会触发双向裁切问题；
• 去掉Flex自带的居中对齐属性，改为给图片自身设置margin: auto：Flex容器中子元素的margin: auto特性依然可以实现居中效果，且溢出时会默认从左上角方向延伸内容，不会触发双向裁切。

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