时间戳

首页 > 解决方案 > Django Wagtail 响应式图像

python - Django Wagtail 响应式图像

问题描述

是否可以在 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 %}

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

标签： pythondjangowagtail

解决方案

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

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

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

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

推荐阅读