关于撇号响应图像的说明

Question

我对撇号 apostrophe-images-widgets 及其 srcset 功能有一些疑问。 Responsive Images 下的文档中对此进行了解释。我已经实施了这个解决方案，但我想我误解了一些东西，因为交付的图像仍然是 one-half 大小作为父背景 div focal-point-test.

我的意思是：

因此具有 srcset 属性的实际 img:

{# 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 裁剪的正确定义的图片和具有 srcset 属性但没有 background-size: cover;[= 的实际 img 元素26=]

我发现您将 img 隐藏在图像小部件中：

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

因此，带有 srcset 的实际 img 将被隐藏，父 div 在这种情况下 .apos-slideshow-item 将以完整尺寸提供图像。

所以我想澄清一下我在这种情况下误解了什么？

Answer 1

apostrophe-images-widgets 模块使用双图像技术，专门用于包含多个图像并用作幻灯片放映的情况。当图像大小不同时，该技术有助于保持图像外观。这就是 apos-slideshow .apos-slideshow-item img CSS 选择器被隐藏的原因。目的是只有 background-image 可见。

As an aside, and as a member of the Apostrophe core team, I can tell you that this is an outdated strategy that we don't use anymore ourselves very often, if at all. But it's hard to remove or significantly change things like this once hundreds of sites are using it.

如果您正在制作自己的图像小部件（这是个好主意），我不会同时使用 background-image 包装器和一个普通的 img 标签。确定哪种最适合您的用例。仍然有充分的理由同时使用两者（可能是滑块的其他变体），但这取决于项目。

如果您的目标是使用焦点工具，那么具有普通 src 属性的普通 img 标签是不够的。一种方法是在元素上使用 background-image 属性，该元素已通过其他方式（例如 width 和 height 样式）设置了大小，而 background-position 使用焦点值。 另一种方法 是使用 object-fit，焦点值在 object-position style.

中

关于撇号响应图像的说明

Clarification about apostrophe responsive images

apostrophe-cms