HTML怎么让图片在页面中呈圆形展示_网页头像代码【分享】-html教程-PHP中文网

图片呈圆形展示需设 border-radius: 50% 并保证宽高相等或用 object-fit: cover 裁切；推荐 img 标签直接设置，或用 div 包裹实现边框、阴影等效果；响应式可用 vw 单位配合媒体查询。

html怎么让图片在页面中呈圆形展示_网页头像代码【分享】

让图片在网页中呈圆形展示，核心是用 CSS 的 border-radius 属性把图片的四个角完全圆角化。只要值设为 50%，无论图片宽高是否相等，都能得到正圆效果（前提是图片本身为正方形或通过 CSS 强制裁成正方形）。

基础圆形图片代码（推荐）

这是最常用、兼容性好、语义清晰的方式：

@@##@@

说明与建议：

width 和 height 必须相等，否则会变成椭圆；100px 可按需替换为 40px、64px 等
border-radius: 50% 是关键，表示将边框半径设为宽高的一半
object-fit: cover 能让非正方形原图自动居中裁切填充，避免拉伸变形

用 div 包裹实现更灵活的圆形头像

适合需要添加边框、阴影、悬停效果或响应式缩放的场景：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

<div class="avatar">
  @@##@@
</div>

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden; /* 关键：隐藏溢出部分 */
  border: 2px solid #eee;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

响应式圆形头像（适配手机和桌面）

用相对单位 + 媒体查询，让头像在不同屏幕下自动缩放：

.avatar-r {
  width: 8vw;        /* 视口宽度的 8% */
  height: 8vw;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 768px) {
  .avatar-r {
    width: 12vw;
    height: 12vw;
  }
}

搭配 HTML 使用：<div class="avatar-r"><img src="avatar.jpg" alt="头像" style="max-width:90%"></div>

注意事项与常见问题

实际使用中容易忽略但影响效果的细节：

原始图片如果不是正方形，仅加 border-radius: 50% 会显示为“圆角矩形”，必须配合等宽高等比例控制或 object-fit
IE 旧版本不支持 object-fit，如需兼容可改用背景图方式（background-image + background-size: cover）
头像建议使用 PNG 或 WebP 格式，透明背景更易融入各种页面主题

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！