为何Sanity旋转图片90度后返回正方形？如何解决？

问题出在图像CDN的默认缩放模式上，旋转后图像比例变化，默认的max适配模式会强制保持原比例，导致尺寸不符合预期。

修正代码 #

根据你的需求选择以下两种方式之一：

1. 强制填充到指定尺寸（允许拉伸）

urlForImage(product.image.asset._ref)
  .auto('format')
  .orientation(isImageStanding ? 90 : 0)
  .fit('fill') // 关键：强制适配指定宽高
  .width(isImageStanding ? 338 : 450)
  .height(isImageStanding ? 450 : 338)
  .url()

2. 裁剪图像以适配尺寸（保持比例，不拉伸）

urlForImage(product.image.asset._ref)
  .auto('format')
  .orientation(isImageStanding ? 90 : 0)
  .fit('crop') // 关键：裁剪边缘适配尺寸
  .width(isImageStanding ? 338 : 450)
  .height(isImageStanding ? 450 : 338)
  .url()

原因说明 #

默认情况下，这类图像处理工具（比如Sanity的urlForImage）使用fit('max')模式：它会保持图像原始比例，将图像缩放到不超过你设置的宽高最大值。当你旋转90度后，图像的宽高比例发生反转，如果新比例和你设置的width/height比例不匹配，工具会优先保证图像完整，导致其中一个维度被压缩，最终出现正方形的结果。

添加fit('fill')或fit('crop')可以打破这个默认逻辑：

• fill会直接拉伸图像到指定尺寸，完全匹配你设置的宽高（可能导致图像变形）
• crop会裁剪图像的边缘区域，确保填充整个指定尺寸，同时保持图像原有比例

另外，请确认isImageStanding的判断逻辑是否准确——它应该对应原图像是否为竖版（高度大于宽度），这样旋转后的尺寸设置才能匹配你预期的矩形比例。

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