Разъяснение об изображениях, реагирующих на апостроф

Question

У меня вопрос относительно апострофов apostrophe-images-widgets и его функций srcset. Это объясняется в вашей документации в разделе Адаптивные изображения . Я реализовал это решение, но я думаю, что что-то неправильно понял, потому что доставленное изображение все еще имеет размер one-half как фон родительского div focal-point-test.

Я имею в виду следующее:

Таким образом, фактический img с атрибутом srcset:

{# lib/modules/my-image-widget/views/widget.html #}
<img src="{{ apos.attachments.url(data.widget._image.attachment, { size: data.options.size or 'full' }) }}" srcset="{{ apos.images.srcset(data.widget._image.attachment) }}" sizes="{{ data.options.sizesAttr or '100vw' }}" alt="{{ data.widget._image.description or data.widget._image.title }}">

присутствует в изображении, но есть также фон, определенный для родительского focal-point-test с:

{% set image = apos.images.first(data.page.main) %}
{% if image %}
  <div class="focal-point-test" style="
    {%- if apos.attachments.hasFocalPoint(image) -%}
      background-position: {{ apos.attachments.focalPointToBackgroundPosition(image) }};
    {%- endif -%}
    background-image: url({{ apos.attachments.url(image, { size: 'one-half' }) }})"></div>
{% endif %}

В этом случае два изображения будут перекрывать одно правильно заданное изображение с кадрированием focalPoint и фактическим элементом img, который имеет атрибут srcset, но не background-size: cover;

Я обнаружил, что вы скрываете img в вашем виджете изображения:

apos-slideshow .apos-slideshow-item img {
    visibility: hidden;
    width: 100%;
    height: auto;
}

Таким образом, фактический img с srcset будет скрыт, а родительский div в этом случае .apos-slideshow-item доставит изображение в полном размере.

Итак, я хотел бы попросить разъяснений, что я неправильно понял в этом случае?

Answer 1

Модуль apostrophe-images-widgets использует эту технику двойного изображения специально, когда он содержит несколько изображений и действует как слайд-шоу. Этот метод помогает сохранить внешний вид изображения, когда изображения имеют разные размеры. Поэтому селектор apos-slideshow .apos-slideshow-item img CSS скрыт. Предполагалось, что будет виден только background-image.

Кстати, как член основной команды Apostrophe, я могу сказать вам, что это устаревшая стратегия, которую мы не делаем. Мы не используем себя очень часто, если вообще. Но сложно удалить или существенно изменить такие вещи, когда его используют сотни сайтов.

Если вы создаете свой собственный виджет изображений (что было бы хорошей идеей), я бы не стал использовать оба background-image оболочка и обычный тег img. Решите, что лучше всего подходит для вашего варианта использования. По-прежнему есть веские причины использовать оба (возможно, другие варианты слайдера), но это зависит от проекта.

Если ваша цель - использовать инструмент точки фокусировки, обычный тег img с обычным Атрибут src будет недостаточно. Один из способов - использовать атрибут background-image для элемента, размер которого вы установили другим способом (например, стили width и height) с background-position, используя значения фокальной точки. Другой способ - использовать вместо него object-fit со значениями фокусных точек в стиле object-position .