Джанго трясогузка отзывчивые изображения

Question

Можно ли создавать реагирующие изображения, размер которых изменяется со страницей в трясогузке?

В настоящее время у меня есть это:

{% 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 %}, чтобы не тратить пропускную способностьувеличенное изображение, если оригинал был загружен с очень высоким разрешением), вы можете применить стили CSS согласно руководству, подобному этому , чтобы обеспечить адаптивное поведение.

Со своей структурой HTMLприведенное выше, это может выглядеть так:

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