Невозможно сделать изображения отзывчивыми - PullRequest
Новая
       10

Невозможно сделать изображения отзывчивыми

0 голосов
/ 19 февраля 2019 
width="{{ asset.getWidth('img') }}" height="{{ asset.getHeight('img') }}" , `This classes don't work as intended they just do nothing.`

Я создаю блог, и когда я делаю запись, мои изображения просто занимают весь экран.Они также не сокращаются при отзывчивости. 

{% set myAssetQuery = craft.assets() %}
  {% set images = myAssetQuery.all() %}
  <ul>
      {% for image in images %}
          <li><img src="{{ asset.getUrl('img') }}" width="{{ asset.getWidth('img') }}" height="{{ asset.getHeight('img') }}"></li>
      {% endfor %}
  </ul>
  {% for entry in craft.entries.section('secscrpt') %}
  {% for block in entry.matriz %}
  {{ block.body }}
  {% endfor %}
  {% endfor %}

1 Ответ

0 голосов
/ 23 июля 2019

Вы можете ограничить изображения для их контейнеров, выполнив что-то вроде img { max-width: 100%; height: auto; }.

Для полной поддержки адаптивных изображений вы, вероятно, захотите настроить систему преобразований, которую вы можете использовать.Эти преобразования настраиваются в меню «Настройки»> «Активы»> «Преобразования изображения».

Предполагая, что вы делаете преобразования name маленькими, средними, большими, они будут использоваться в ваших шаблонах следующим образом: 

{% set images = myAssetQuery.all() %}
<ul>
    {% for image in images %}
        <li>
            <picture>
                <source srcset="{{ image.getUrl('large') }}" media="(min-width: 1200px)">
                <source srcset="{{ image.getUrl('medium') }}" media="(min-width: 900px)">
                <source srcset="{{ image.getUrl('small') }}" media="(min-width: 500px)">
                <img src="{{ image.getUrl() }}">
            </picture>
        </li>
    {% endfor %}
</ul>

Вы также можете использовать опцию srcset в теге img следующим образом:

{% set images = myAssetQuery.all() %}
<ul>
    {% for image in images %}
        <li>
            <img src="{{ image.getUrl() }}"
              srcset="{{ image.getUrl('large') }} {{ image.getWidth('large') }}w,
                      {{ image.getUrl('medium') }} {{ image.getWidth('medium') }}w,
                      {{ image.getUrl('small') }} {{ image.getWidth('small') }}w"
               sizes="(max-width: 1200px) 1200px,
                      (max-width: 900px) 900px,
                      500px">
        </li>
    {% endfor %}
</ul>
...