twig - 无法使图像响应

Question

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 %}

Answer 1

您可以通过执行类似img { max-width: 100%; height: auto; }.

为了完全支持响应式图像，您可能需要设置一个可以使用的转换系统。这些变换在 Settings > Assets > Image Transforms 中设置。

假设您将转换名称设为 small、medium、large，这些将在您的模板中使用，如下所示：

{% 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>

您还可以像这样在 img 标签上使用 srcset 选项：

{% 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>