Object-fit:封面和源集

Question

我在一堆图片上使用object-fit: cover。图像的边框占用50vw，并具有动态高度。cover属性工作得很好，但它意味着我不知道在给定的时间我的实际图像会有多宽。

最有可能的是，它将比50vw更宽，并且由于适合对象的盖子，它的溢出将被隐藏。

当我尝试使用srcset时，问题出现了。我无法为sizes属性提供一个可靠的宽度。

我知道大小只需要一个近似值，但我很好奇是否有人以前处理过这个问题。

Answer 1

你的问题出现了艺术方向的问题和内容交付的问题。艺术方向本质上是你对你的内容格式所做的决定(例如，当涉及到图像时:宽图像，特写，肖像，正方形等)，解决方案是创建不同的，裁剪版本的照片，并相应地使用srcset属性，例如，你可能有一个宽图像，在小屏幕上应该是“裁剪”的，因此你可以使用这样的东西：

<picture>
  <source media="(max-width: 799px)" srcset="wide-image-480w-close-up.jpg">
  <source media="(min-width: 800px)" srcset="wide-image-800w.jpg">
  <img src="wide-image-800w.jpg" alt="A wide image">
</picture>

内容交付的另一个问题是什么内容正在交付以及何时交付，这也可以通过上面提到的srcset属性来解决。

您的大小写似乎同时依赖于图像容器的高度和宽度，因此您应该在纵横比中寻找断点，因此示例中的aspect-ratio规则应该如下所示

<picture>
  <source media="(min-aspect-ratio: 8/5)" srcset="wide-image-480w-close-up.jpg">
  <source media="(max-aspect-ratio: 3/2)" srcset="wide-image-800w.jpg">
  <img src="wide-image-800w.jpg" alt="A wide image">
</picture>

但是，在某些情况下，您可能需要更精细的控制，因为视口的纵横比和宽度可能与所使用的图像不相关，因此您还应该注意宽度，这是通过在@media规则中使用and运算符实现的，因此以上内容可以组合成以下内容：

<picture>
   <source media="(max-width: 799px) and (min-aspect-ratio: 8/5)" srcset="wide-image-480w-close-up.jpg">
   <source media="(min-width: 800px) and (max-aspect-ratio: 3/2)" srcset="wide-image-800w.jpg">
   <img src="wide-image-800w.jpg" alt="A wide image">
</picture>

最后，我想指出的是，有很好的服务为图像处理提供了强大的API，这使得这类问题变得轻而易举，也有关于艺术指导和源内容交付的在线内容，特别是在MDN的网站over here上。

更新：我们现在有了另一个css声明，它允许对宽高比的松散控制，它可能仍然不能提供一个非常具体的方法来完全控制艺术方向，但有一些方法可以证明它是有用的。这个词是关于apect-ratio css声明的，在下面的文章中有很好的解释：“Weak declaration”

Answer 2

你可以根据媒体查询给出srcset，首先计算出图像的比例。然后，您可以确定图像在每个屏幕尺寸的50vw下的可见度。

Answer 3

您可以添加width、height、min- & max-width或height作为srcset的属性，如下所示。

 <picture>
   <source srcset="images/w350/1.png" media="(max-width: 576px)" width="358px"
                  height="250px">
   <source srcset="images/w500/1.png" media="(max-width: 991px)" width="502px"
                  height="350px">
   <img src="images/1.png" data-src="images/1.png">
 </picture>