css - MURA: getImageURL 小尺寸截断图像

Question

小尺寸创建的图像太大而无法放入框中。有没有一种方法可以将图像完全包裹起来？

我在做

 <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% 那么一切顺利。此外，我尝试保持自定义大小并提供自定义宽度和高度，但无法使图像正常工作。所有小尺寸图像都被截断。

Answer 1

我认为您可能对 getImageURL() 的工作原理感到困惑。唯一需要传入 height 或 width 参数的情况是传入 size='custom' 或省略 >size 属性。

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

在这种情况下，您真正​​需要的是一个名为 catimg 的预定义图像大小，其 height 和 width 属性为 163px。要创建这个:

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

现在，无论何时您调用 getImageURL(size='catimg')，Mura 都会使用此特定图像进行显示。

干杯!