css - 适合对象:Cover 和 Srcset

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>

然而，在某些情况下，您可能需要更精细的控制，因为视口(viewport)的纵横比和宽度可能与所使用的图像不相关，因此您还应该注意宽度，这是通过使用 和 运算符在你的 @media 规则中，所以上面的可以组合成这个:

<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”