图片裁剪上传后样式错乱是怎么回事？

令狐惠泽提问于 2026-03-17 09:17:19 阅读 326

交互

我在做一个头像上传功能，用的是 cropper.js 裁剪图片，本地预览没问题，但上传到服务器再显示出来，宽高比例就全乱了。我检查了裁剪后的 canvas 导出逻辑，也确认了保存的是裁剪区域的数据，但样式还是不对。

怀疑是 CSS 样式覆盖的问题，因为页面里有其他全局样式可能影响了图片显示。比如下面这段我给预览图加的样式：

.avatar-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
}

但实际渲染出来的图片被拉伸了，object-fit 好像没生效，是不是哪里冲突了？

我来解答赞 5 收藏

反馈

暂无解答