我想提高 Cloudinary 显示的图像的分辨率

Question

我正在显示存储在 Cloudinary 上的图像，如下所示：

 <div class="col-xs-4 col-sm-3 col-md-3 col-lg-3 mb-2">
    <advanced-image
      [cldImg]="img"
      [plugins]="plugins"
      class="ml-lg-3 mr-lg-3"
    ></advanced-image>
  </div>

以及角度分量

this.img = this.cld
    .image(`${this.displayImagePath}`)
    .roundCorners(byRadius(100))
    // .roundCorners(max())
    // .width(100)
    // .height(100)
    // .format('jpg')
    .delivery(quality(100));
    // .resize(thumbnail().width(1000).height(1000))
    // .resize(scale().width(1000))
    // .delivery(quality('auto:best'))
    // .delivery(format(auto()));
    // .format('auto')
    // .quality('auto:best');
  if (this.imageVersion) {
    this.img.setVersion(this.imageVersion);
  }

这一切都工作得很好，并且图像显示正确（我正在使用引导网格系统，它通常按预期显示 - 在宽屏幕上很好地显示，然后在我的移动垂直上 - 正如我对 col-xs 的期望指定。）

但是在我的手机上（仅使用 chrome 浏览 - 这里没有应用程序），我可能想放大图像以查看更精细的细节（使用手机屏幕手指移动 - 滑动/拉伸等..）。然而，当我这样做时，我很快发现实际存储在 Cloudinary 上的图像的分辨率要低得多。

我真的不知道要问什么 - 我想在移动设备上缩放屏幕就像在浏览器上更改视口一样。一台笔记本电脑？您希望 Cloudinary 根据缩放值的变化来修改显示吗？

我不希望图像占用屏幕上更多的“空间” - 即它的尺寸必须保持不变。我只是希望显示的图像的分辨率 (dpi) 更高。

我已经使用了所有设置（质量、格式、调整大小、宽度、高度） - 但似乎这一切都被 Cloudinary 覆盖，因为它自行确定了该显示尺寸的分辨率？

抱歉，如果这听起来令人困惑 - 如果有人能够启发我或为我指明方向，我将非常感激。

Answer 1

当您想要缩放时，打开一个对话框，该对话框会加载未经优化或经过优化以获得更高像素密度的原始图像，优化的全部原因是使图像以最高的清晰度可见，但像素和尺寸最少。这提供了高品质的外观，但尺寸却尽可能小。

在移动设备上，图像不需要太多像素（400x400），即使原始图像是（1024x1024）。但缩放时像素很重要。