如何让正方形图片实现跨设备响应式显示且核心人物始终居中？

你当前的代码已经用到了object-fit: cover来实现图片等比缩放裁剪，只需要补充两个配置即可实现人物始终居中的全设备适配效果： #

最终兼容代码（现代浏览器） #

img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
}

属性说明 #

• width: 100%：让图片宽度始终跟随父容器宽度自适应，适配不同设备屏幕尺寸
• aspect-ratio: 1/1：强制图片保持1:1正方形比例，不受非正方形父容器的比例影响
• object-fit: cover：图片按原始比例缩放，完全填满容器，超出部分自动裁剪
• object-position: center：指定裁剪时以图片中心为基准保留内容，保证居中的人物始终在可视区域内

老旧浏览器兼容方案 #

如果需要兼容不支持aspect-ratio属性的老旧设备，可以改用父容器padding占位的方案实现固定比例：

父容器样式 #

.img-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 100% 对应宽高比1:1 */
}

图片样式 #

.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
}

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