Django Wagtail 响应式图像答案

【问题标题】：Django Wagtail responsive imagesDjango Wagtail 响应式图像
【发布时间】：2018-09-19 23:24:40
【问题描述】：

是否可以在 Wagtail 中创建随页面调整大小的响应图像？

目前我有这个：

{% for item in page.gallery_images.all %}
     <div class="pull-left img-responsive my-5">
         {% image item.image original %}
         <p>{{ item.caption }}</p>
     </div>
{% endfor %}

但页面宽度减小时宽度和高度不会变小。

【问题讨论】：

标签： python django wagtail

【解决方案1】：

这不在 Wagtail 的职责范围内 - 响应式图像是在 CSS 中实现的，Wagtail 有意避开这个细节，让您可以根据自己的喜好灵活地构建和设置前端页面。

{% image %} 模板标签将以您选择的固定分辨率为您提供<img> 元素；只要该分辨率大于您打算显示它的最大尺寸（如果您使用{% image item.image original %}，当然应该是这种情况，尽管您也可以考虑类似{% image item.image width-1000 %} 这样您就不会浪费带宽服务上传过大的图像，如果原件以极高的分辨率上传），您可以按照a guide like this one 应用 CSS 样式以提供响应式行为。

根据上面给出的 HTML 结构，这可能如下所示：

.img-responsive img {
    width: 100%;
    max-width: 1000px;
    height: auto;
}

【讨论】：

太棒了，我忘记了样式元素中的 img 标签。再次感谢您！
有没有办法制作一个按钮并能够在 wagtail admin 中更改 href？找不到任何文档。