直接原因是border-radius百分比值分别按宽高计算，图片缩放导致宽高比变化时50%圆角失真；根本解法是用aspect-ratio锁定容器比例并配合object-fit，旧版Safari可用padding-top:100%模拟。
img 元素的 border-radius 在不同屏幕宽度下变形了
直接原因不是 CSS 写错了，而是 border-radius 的百分比值（比如 50%）是相对于元素的**宽高分别计算**的：水平方向按 width 算，垂直方向按 height 算。当图片在小屏被缩放、宽高比变化时，border-radius: 50% 就会从正圆变成椭圆。
- 常见错误现象：
<img src="a.jpg" style="max-width:90%" alt="CSS响应式图片圆角处理_在大屏与小屏保持一致的视觉比例" >在手机上看着像鸡蛋，在桌面端才像圆 - 使用场景：头像、商品图、卡片封面等需要“始终是正圆/统一圆角”的图片容器
- 根本解法不是调
border-radius，而是让图片容器本身保持固定宽高比 + 圆角作用在容器上，图片用object-fit填充 - 推荐结构：
<div class="avatar"> <img src="a.jpg" alt=""> </div>
，然后对.avatar设border-radius和aspect-ratio
用 aspect-ratio + object-fit 控制图片容器比例
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，它能锁死容器宽高比，避免图片拉伸导致圆角失真。
-
aspect-ratio: 1 / 1表示正方形容器，border-radius: 50%就永远是正圆 - 图片自身加
object-fit: cover（裁剪居中）或contain（完整显示），不再影响容器形状 - 兼容性兜底：旧浏览器不支持
aspect-ratio时，可用padding-top: 100%技巧（需设position: relative和子元素position: absolute） - 别对
<img alt="CSS响应式图片圆角处理_在大屏与小屏保持一致的视觉比例" >直接设border-radius后再缩放——这是多数人踩坑的起点
响应式圆角数值要不要随屏幕改？
一般不用。圆角视觉大小是否“一致”，取决于它和容器尺寸的相对关系，而不是绝对像素值。强行在媒体查询里改 border-radius: 4px → 2px，反而会让小屏看起来更生硬。
- 真正要响应的是容器尺寸（比如
max-width或font-size），让border-radius: 0.5em或2%这类相对单位自动缩放 - 避免用
px写死圆角，除非明确要求“所有设备都显示 exactly 4 像素弧度”（极少场景） - 如果设计稿标注“大屏圆角 12px，小屏 6px”，优先检查是不是容器尺寸本身没做响应，而非圆角参数问题
Safari 15.3 及更早版本不支持 aspect-ratio 怎么办
它不支持 aspect-ratio，但支持 padding-top 百分比基于宽度的特性，可手动模拟。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构保持不变：
<div class="avatar"> <img src="a.jpg" alt=""> </div>
- CSS 写法：
.avatar { position: relative; width: 100%; max-width: 200px; padding-top: 100%; /* 正方形 */ } .avatar > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } - 注意：这个技巧下，
border-radius必须写在img上（因为容器无内容区），且必须配合position: absolute，否则图片会溢出 - 别忘了加
display: block到img，防止底部多出空白间隙
圆角是否“看起来一致”，本质是容器比例是否稳定、单位是否相对、渲染上下文是否被意外干扰——这些点比记住某条 CSS 规则更重要。
