html写出圆形图片

使用CSS border-radius属性

通过CSS的border-radius属性将图片的边角设置为50%，即可实现圆形效果，需确保图片宽高相等,否则会显示为椭圆。

“` | HTML结构，引入图片并添加类名 |
| “`css
.circle-img {
width: 200px; / 设置固定宽度 /
height: 200px; / 设置与宽度相同的高度 /
border-radius: 50%; / 圆角半径为50% /
}
“` | CSS样式，定义圆形效果 |

结合<div>容器实现

通过包裹图片的<div>容器设置圆形,可更灵活控制尺寸和背景。

“` | HTML结构，用容器包裹图片 |
| “`css
.circle-container {
width: 150px; / 容器宽度 /
height: 150px; / 容器高度 /
border-radius: 50%; / 容器圆角 /
overflow: hidden; / 隐藏溢出部分 /
}
.circle-content {
width: 100%; / 图片铺满容器 /
height: 100%;
object-fit: cover; / 保持图片比例裁剪 /
}
“` | CSS样式，容器定义圆形，图片自适应填充 |

常见问题与解答

问题1：如何调整圆形图片的大小？

解答：修改CSS中width和height的值即可，将width和height均设置为300px，圆形直径会随之增大，若需响应式，可用百分比（如width: 50%），但需确保宽高比例始终为1:1。

问题2：如何处理非正方形图片使其显示为圆形？

解答：使用object-fit: cover属性（如方法二中的.circle-content），此属性会按比例裁剪图片，填充满容器且不变形，若图片本身非正方形，裁剪后仍能保持圆形