移动端Safari下图片缩放后About板块圆角显示异常问题求助

iOS 移动端 Safari 对带 border-radius: 50% 的图片元素存在经典渲染兼容问题：当元素仅设置固定宽度、未强制锁定1:1宽高比时，浏览器会先按图片自然比例计算圆角，再对图片做缩适配屏幕尺寸，最终把正圆形圆角拉伸成椭圆。
之前尝试的“容器设350px、图片设width:100%”方案之所以打乱桌面端其他图片布局，是因为样式规则没有限定作用域，直接修改了全局.preview类的宽度逻辑，影响了其他板块原有展示图的尺寸。

核心思路 #

所有适配规则只绑定到 About 板块的专属容器选择器，完全不修改全局.preview类的原有样式，从根源上避免其他位置的布局异常。

第一步：改造About板块的图片容器样式 #

给.details .img-wrapper增加响应式宽度约束，既保证桌面端最大尺寸和原设计的350px一致，又不会在小屏移动端出现内容溢出：

.details .img-wrapper {
    height: auto;
    /* 自动取350px和屏幕可用宽度的较小值，适配移动端 */
    width: min(350px, 90vw);
    margin: 0 auto;
}

第二步：给作用域内的图片增加渲染兼容规则 #

针对About板块内的.preview图片单独写适配规则，锁定1:1宽高比，从渲染逻辑上解决Safari拉伸圆形的问题，同时保留所有原有视觉效果：

.details .img-wrapper .preview {
    width: 100%;
    /* 强制锁定1:1宽高比，兼容新旧版本Safari */
    aspect-ratio: 1 / 1;
    -webkit-aspect-ratio: 1 / 1;
    /* 保证图片内容按比例裁剪填充，不会被拉伸变形 */
    object-fit: cover;
    /* 保留原有视觉样式 */
    border-radius: 50%;
    border: 2px solid #8281815e;
    margin: 20px 0;
    -webkit-box-shadow: 1px 5px 22px -4px #000000;
    box-shadow: 1px 5px 22px -4px #000000;
}

低版本iOS Safari兼容补充 #

如果需要兼容iOS 14及更早不支持aspect-ratio属性的系统，可以把宽高比锁定逻辑换成传统的padding hack方案，兼容性更好：

.details .img-wrapper {
    height: auto;
    width: min(350px, 90vw);
    margin: 0 auto;
    position: relative;
    /* 用padding撑出1:1的占位空间 */
    padding-top: 100%;
}
.details .img-wrapper .preview {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #8281815e;
    margin: 0;
    -webkit-box-shadow: 1px 5px 22px -4px #000000;
    box-shadow: 1px 5px 22px -4px #000000;
}

• 所有适配规则仅作用于About板块的图片，其他位置的.preview类完全沿用原有样式，不会出现桌面端展示图宽度被意外修改的问题
• 强制锁定1:1宽高比后，iOS Safari在渲染时会基于最终的正形容器计算圆角，不会再出现圆形被拉伸成椭圆的异常效果
• 响应式宽度设置保证小屏移动端图片不会超出屏幕边界，布局更稳定

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