纯CSS图片滑块在Safari中显示异常，寻求技术帮助

问题分析 #

当前纯CSS滑块在Safari中出现图片过度拉伸、向右溢出的问题，核心原因包括：

• Safari对aspect-ratio与flex布局的组合支持存在兼容性细节差异
• 图片未设置明确的尺寸约束和对象适配规则
• CSS代码中存在语法错误（如box-shadow笔误、border属性不完整）

修复方案 #

以下是针对性的代码修改，可解决Safari中的兼容性问题：

修改后的CSS代码

#Slider-Wrapper
{
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

#Slider
{
    display: flex;
    width: 100%; /* 确保容器继承父级最大宽度 */
    aspect-ratio: 2405.2/1570.2;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25); /* 修正笔误：re → rem */
    border-radius: 0.5rem; /* 修正属性：border → border-radius */
}

#Slider img
{
    flex: 0 0 100%; /* 禁止图片在flex布局中缩放 */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪填充容器，需完整显示可换为contain */
    scroll-snap-align: start;
}

#Slider-Nav
{
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

#Slider-Nav a
{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.75;
    transition: opacity ease 250ms;
}

#Slider-Nav a:hover
{
    opacity: 1;
}

修改说明

1. 修正语法错误：修复box-shadow中的笔误，将不完整的border属性改为border-radius，避免样式异常。
2. 容器宽度约束：给#Slider添加width: 100%，确保它在Safari中正确继承父容器的最大宽度。
3. 图片尺寸与适配：
   • 将flex: 1 0 100%改为flex: 0 0 100%，禁止图片在flex布局中被拉伸或压缩。
   • 添加width: 100%和height: 100%，让图片填满滑块容器。
   • 使用object-fit: cover确保图片保持原始比例，裁剪超出部分填充容器（需完整显示图片可替换为object-fit: contain）。
4. Safari兼容性优化：通过明确的尺寸约束和flex属性设置，规避Safari对aspect-ratio和flex组合的渲染差异。

验证效果 #

修改后，滑块图片在Safari中会保持正确比例，不会出现过度拉伸和溢出问题，同时保留原有滑块的平滑滚动和定位功能。

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