非1:1比例图片适配圆形头像的实现方案咨询

直接通过CSS属性就能解决你的问题，两种可行方案任选：

方案一：修改img标签样式（推荐） #

给你的img标签添加object-fit: cover和object-position: center属性，就能实现填充圆形且居中显示核心区域的效果：

<img src="<?php echo $image; ?>" style="border-radius: 50%; border: 1px #000 solid; height: 70px; width: 70px; object-fit: cover; object-position: center;"/>

• object-fit: cover：让图片按容器比例缩放，超出部分自动裁剪，保证圆形区域完全被填充，不会留空白
• object-position: center：强制图片中心对齐容器中心，避免大尺寸图片只显示边角，优先保留面部等核心区域

方案二：容器包裹+背景图（兼容旧浏览器） #

如果需要兼容不支持object-fit的老浏览器，可以用div容器包裹，把图片设为背景图：

<div style="border-radius: 50%; border: 1px #000 solid; height: 70px; width: 70px; background-image: url('<?php echo $image; ?>'); background-size: cover; background-position: center;"></div>

原理和方案一一致，通过background-size: cover填充容器，background-position: center确保核心区域居中显示。

内容的提问来源于stack exchange，提问作者Jordan McMahon