twig thumbnail - 设置相对偏移量

Question

我正在使用OctoberCMS，我的缩略图库以这种方式生成：

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

偏移值将超过＆＃34;过冲＆＃34;图片，如果图片格式是1：1。

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

background-position: 0% 0%;

你有什么想法吗？

这是一张照片，在那里你可以看到树枝过度＆＃34;过度拍摄＆＃34;在第一行： Example

Answer 1

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

  

注意：要使用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> 的和宽度）并管理您的观点。

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