0

小尺寸创建的图像太大而无法放入盒子中。有没有办法可以完全包裹图像？

我在做

 <div class="catimgback">
    <img src="#arguments.item.getImageURL(size='arguments.size',width=arguments.width,height=arguments.height)#" alt="#htmlEditFormat(arguments.item.getValue('title'))#" class="catimg" />
</div>

如果我在哪里arguments.width = 163px; arguments.height=163px;以及arguments.size = small 如果我制作 catimgback 的 style=height:100% 那么一切顺利。此外，我尝试将尺寸保持为自定义并提供自定义宽度和高度，但无法使图像正常工作。所有小尺寸图像都被切断。

4

1 回答 1

1

我想你可能对如何getImageURL()工作感到困惑。唯一需要传入heightorwidth参数的情况是传入size='custom'或完全省略该size属性。

此外，当您使用 时size='custom'，图像会根据已上传图像的尺寸自动裁剪。所以，在你的情况下，你想要一个方形图像......但是如果上传的图像不完全是方形的，也许它是一个矩形。因此，在这种情况下，Mura 从图像的最中心开始，然后从那里向外扩展至最外边界。如果图像是一个垂直矩形，您可以想象矩形的顶部和底部不会进行剪切。相反，如果图像是水平矩形，则图像的左右边缘不会进入剪切。

在这种情况下，您真正​​想要的是一个预定义的图像大小，catimg其属性为 163px。要创建这个：heightwidth

  1. 从管理区域转到站点配置 > 编辑站点
  2. 单击图像选项卡
  3. 在底部，单击添加自定义图像大小
  4. 输入名称（例如，catimg）
  5. 输入高度
  6. 输入宽度
  7. 单击保存（您现在拥有可用于任何内容项的自定义图像大小）
  8. 转到站点管理器，然后添加/编辑内容项
  9. 如果编辑已有图像的现有内容项，请单击裁剪标记以进入图像详细信息屏幕。否则，选择要上传的图像，然后发布。
  10. 在“图像详细信息”屏幕中，向下滚动到您创建的自定义图像大小，您现在可以重新裁剪图像以选择所需的图像区域。

现在，只要你打电话getImageURL(size='catimg')，Mura 就会使用这个特定的图像来显示。

干杯!

于 2014-08-28T17:22:42.567 回答