Image 如何在摇尾中制作影像适配装置

我的页面上有一个横幅图像，我希望填充页面宽度。在Wagtail中，正确的方法是什么

我有

{% image page.banner_image fill-1110x300 as img %}

这在PC上看起来不错，但在手机上太宽了

---

如何调整图像大小以适应设备？

@gasman评论中的链接为我的解决方案提供了基础

xxx.html

    {% image page.banner_image scale-100 as img %}
    <img src="{{ img.url }}" alt="{{ img.alt }}" class="responsive">

---

这将显示一个图像，该图像水平填充浏览器并按比例调整其高度。

@gasman注释中的链接为我的解决方案提供了基础

xxx.html

    {% image page.banner_image scale-100 as img %}
    <img src="{{ img.url }}" alt="{{ img.alt }}" class="responsive">

---

这将显示一个水平填充浏览器并按比例调整其高度的图像

使用任何基于CSS的解决方案-在混合中使用Wagtail不会真正改变任何内容。使用任何基于CSS的解决方案-在混合中使用Wagtail不会真正改变任何内容。