时间戳

首页 > 解决方案 > 关于撇号响应图像的说明

apostrophe-cms - 关于撇号响应图像的说明

问题描述

apostrophe-images-widgets我对撇号及其srcset功能有一些疑问。响应式图像下的文档中对此进行了解释。我已经实现了这个解决方案，但我认为我误解了一些东西，因为交付的图像的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裁剪和img具有srcset属性但没有属性的实际元素background-size: cover;

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

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

因此，实际的 imgsrcset将被隐藏，并且在这种情况下，父 div.apos-slideshow-item将仍以全尺寸提供图像。

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

标签： apostrophe-cms

解决方案

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

顺便说一句，作为 Apostrophe 核心团队的成员，我可以告诉你，这是一个过时的策略，我们自己不再经常使用，如果有的话。但是一旦数百个站点都在使用它，就很难删除或显着改变这样的东西。

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

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

推荐阅读