twig - 树枝缩略图 - 设置相对偏移

Question

我正在使用 OctoberCMS，我的缩略图库是这样生成的：

<img src="{{ image.thumb(250, 250, {mode:'crop', offset: [0,100]} ) }}">

如果图片格式为 1:1，偏移值将“过冲”图片。

我正在寻找一种方法来获得每个图像大小的最顶部，比如 css 属性

background-position: 0% 0%;

你有什么想法？

这是一张图片，您可以在其中看到顶行中的树枝“过冲”： 示例

Answer 1

为此，您可以使用CSSbackground-image的属性，使用属性可以使用属性。对于财产，您在这里有更多选择。background-imagebackground-positionbackground-position

注意：要使用backgrond-image属性，您必须在缩略图生成器功能中使用自动模式。

如果您link在该图像上定义了任何内容，则可以background-image在链接上使用属性并在其上提供内联 CSS，如下所示

<a href="your_url" 
style="background-position: center top; background-image: url({{image.getThumb(250, 250, 'auto')}})">
</a>

或代替<a>标签，您可以使用任何 HTML 标签，<div> 并为此提供 CSS 属性（特定的高度和宽度）<div>并管理您的视图。

试试这个，告诉我你的评论。