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; }之类的操作将图像限制在其容器中。

要完全支持响应式图像，您可能需要设置一个可以使用的变换系统。这些转换是在“设置”>“资产”>“图像转换”中设置的。

假设您将转换名称命名为小，中，大，这些将在这样的模板中使用：

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

无法使图像响应

1 个答案: