WordPress团队页图片设同宽高后高度不统一问题咨询

该问题由浏览器渲染图片时默认保持原始宽高比的机制导致。当你在HTML标签属性中同时为图片设置固定宽高时，如果原图宽高比与设置值的比例不匹配，现代浏览器会优先适配宽度属性，按照图片原始比例自动计算渲染高度，最终出现宽度统一、高度不一致的现象。

• CSS强制适配方案（最快捷，无需修改原图）
  无需逐张处理素材，直接为所有团队头像添加统一CSS规则，锁定容器尺寸的同时保持图片比例，超出部分自动裁切，不会出现拉伸变形：

  .team-member-avatar {
    width: 120px; /* 替换为你需要的标准宽度值 */
    height: 120px; /* 替换为你需要的标准高度值 */
    object-fit: cover; /* 核心属性：按比例填充容器，超出范围自动裁切 */
    object-position: center; /* 裁切时对齐图片中心，保证人物头像居中显示 */
    /* border-radius: 50%; 如需圆形头像可取消这行注释，方形头像直接删除即可 */
  }
  

  给所有团队头像的<img>标签添加class="team-member-avatar"即可立即生效。
• WordPress原生尺寸注册方案（适合长期维护）
  可以在当前主题的functions.php文件中提前注册团队头像的固定尺寸，后续上传新头像时WordPress会自动生成符合尺寸要求的硬裁切版本，从源头上避免比例问题：

  // 注册名为team-avatar的固定尺寸，宽120px高120px，开启强制裁切
  add_image_size( 'team-avatar', 120, 120, true );
  

  前端调用头像时直接输出team-avatar尺寸的图片资源即可。针对已经上传完成的历史头像，批量重新生成媒体缩略图即可，无需逐张重新上传。
• 背景图渲染方案（适合复杂交互场景）
  如果需要叠加hover效果、遮罩层等特殊样式，可以将头像作为容器背景图渲染，同样能保证尺寸统一：

  .avatar-container {
    width: 120px;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  

  对应HTML结构写为<div class="avatar-container" style="background-image: url('头像资源地址')"></div>即可。

注意：不要直接无适配强制拉伸图片到固定宽高，否则会出现人物变形、画面模糊的问题，优先选择保持原始比例的裁切方案。

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