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

Question

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

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

偏移值会"overshoot"图片，如果图片格式是1:1.

我正在寻找一种方法来获得每个图像尺寸的顶部，例如 css 属性

background-position: 0% 0%;

你有什么想法吗？

这是一张图片，您可以在第一行中看到树枝 "overshoots"： Example

Answer 1

为此，您可以使用 background-image 属性 of CSS 和 background-image属性可以用background-position属性。对于 background-position 属性，您有更多选择 here.

Note: For using backgrond-image property you have to use auto mode in thumbnail generator function.

如果您在该图像上定义了任何 link，您可以在 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> 并为 <div>[=38 提供 CSS 属性（特别是 height 和 width） =] 并管理您的视图。

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

twig thumbnail - set relative offset