如何用HTML快速制作圆形图片？

使用CSS border-radius（推荐）

原理：通过CSS将方形图片的边框半径设置为50%,形成圆形效果。

<div class="circle-image-container">
  <img 
    src="your-image.jpg" 
    alt="圆形风景图片示例" 
    class="circle-image"
    width="200" 
    height="200"
  >
</div>

.circle-image {
  border-radius: 50%;      /* 核心代码 */
  object-fit: cover;       /* 防止图片变形 */
  display: block;          /* 解决底部空隙 */
  width: 200px;            /* 宽高需相等 */
  height: 200px;
}

关键说明：

1. 宽高相等：必须设置相同的宽高值（如200px）,否则会显示为椭圆。
2. object-fit: cover：确保图片自适应填充,不拉伸变形。
3. 语义化属性：
   • alt 属性描述图片内容（提升SEO和无障碍访问）
   • 显式声明 width/height 避免布局偏移（符合Core Web Vitals标准）

背景图方案（适合动态尺寸）

适用场景：需要圆形背景图或动态控制大小时。

<div 
  class="circle-bg-image"
  role="img"
  aria-label="圆形用户头像"
  style="--size: 180px;"
></div>

.circle-bg-image {
  width: var(--size, 150px);      /* 默认150px，可通过CSS变量覆盖 */
  height: var(--size, 150px);
  border-radius: 50%;
  background-image: url("user-avatar.jpg");
  background-size: cover;         /* 填充整个圆形区域 */
  background-position: center;    /* 图片居中显示 */
}

优势：

• 通过CSS变量灵活控制尺寸
• 支持背景图平铺、定位等进阶效果
• 符合WAI-ARIA规范（role="img" + aria-label）

注意事项

1. 性能优化：
   • 图片应提前压缩（工具推荐：TinyPNG）
   • 使用现代格式（WebP/AVIF）
2. 响应式适配：

   /* 基于容器宽度自适应 */
   .circle-image {
     width: 100%;
     height: auto;
     aspect-ratio: 1/1;  /* 保持1:1宽高比 */
   }

3. 浏览器兼容：
   • border-radius 兼容所有主流浏览器（包括IE9+）
   • aspect-ratio 需在旧浏览器中添加Polyfill

最终效果对比

引用说明：本文代码遵循W3C标准，兼容性数据参考CanIUse.com（2025），响应式设计建议源自Google Web Fundamentals指南，图片优化方案依据PageSpeed Insights最佳实践。