如何制作适合fit的图像的设备

Question

我的页面上有横幅图像，我希望填满页面宽度。在Wa中做这件事的正确方法是什么？

我有

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

并且在PC上看起来不错，但是在电话上太宽了

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

Answer 1

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

xxx.html

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

xxx。css **

.responsive {
  width: 100%;
  height: auto;
}

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