Question

能否在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 %}

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

Answer 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;
}

Django Wagtail响应式图像

1 个答案: