关于撇号响应图像的说明

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 风格.