当使用 object-fit: contain 时，border-radius 对 元素本身失效；正确方案是将图片包裹在带圆角的容器中，或改用 Flex 布局配合 width: auto 实现等效效果并保留圆角。
当使用 `object-fit: contain` 时，`border-radius` 对 `` 元素本身失效；正确方案是将图片包裹在带圆角的容器中，或改用 flex 布局配合 `width: auto` 实现等效效果并保留圆角。
在 CSS 中，object-fit: contain 能确保图片完整、按比例缩放地显示在容器内，但其渲染机制会导致直接作用于 的 border-radius 被裁剪区域忽略——不是样式不生效，而是圆角被 object-fit 的内部绘制逻辑绕过。因此，单纯给
添加 border-radius 并不能看到预期的圆角效果。
✅ 推荐解决方案：容器包裹法（最可靠）
将图片放入一个具有 border-radius 和 overflow: hidden 的父容器中，让容器负责裁剪，图片自由缩放：
<div style="
width: 50%;
height: 77vh;
background-color: red;
border-radius: 11px;
overflow: hidden;
">
<img src="/uploads/20260511/17784884786a01949e9cc9d.jpg"
style="width: 100%; height: 100%; object-fit: contain;">
</div>✅ 优势：
AI舌诊面诊问诊医疗系统+诊疗商城系统源码
下载
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
- 完全保留 object-fit: contain 的语义与行为；
- 圆角由容器控制，稳定可靠，兼容所有现代浏览器；
- 无需修改图片尺寸逻辑，响应式友好。
⚠️ 替代方案：Flex 布局 + width: auto（需谨慎）
如原答案所提，移除 object-fit、改用 width: auto; height: 100% 并结合 Flex 居中，虽能实现视觉近似效果，但本质已脱离 contain 的严格定义（它不再保证宽高比约束下的完整可见性，尤其在极端宽高比下可能溢出或拉伸）：
<div style=" width: 50%; height: 77vh; background-color: red; display: flex; justify-content: center; align-items: center; border-radius: 11px; overflow: hidden; "> <img src="..." style="max-width:90%" alt="如何在保持 object-fit: contain 的同时为图片添加圆角边框" > </div>
⚠️ 注意事项：
- 此方式依赖 max-width: 100% 防止横向溢出，但垂直方向无天然约束，需配合 align-items: center；
- 不适用于需要精确 contain 行为的场景（如设计系统组件、图像画廊）；
- 若图片原始宽高比远大于容器，可能出现顶部/底部留白不均问题。
? 总结
| 方案 | 是否保留 object-fit: contain | 圆角是否可靠 | 推荐度 |
|---|---|---|---|
| 容器包裹法（推荐） | ✅ 是 | ✅ 是 | ⭐⭐⭐⭐⭐ |
| Flex + width: auto | ❌ 否（模拟效果） | ✅ 是（靠容器） | ⭐⭐☆ |
始终优先使用带 border-radius 和 overflow: hidden 的外层容器——这是语义清晰、兼容性强、可维护性高的标准实践。
