对象拟合:封面和Srcset

Question

我正在使用object-fit: cover一堆图像.图像的框架占据50vw并具有动态高度.封面属性效果很好,但这意味着我真的不知道我的实际图像在给定时间的宽度.

很可能它会比它更宽,50vw并且由于物体贴合的覆盖物会隐藏其溢出.

当我尝试使用srcset时会出现问题.我无法为sizes属性提供可靠的宽度.

我知道这个尺寸只需要一个近似值,但我很好奇是否有人之前处理过这个问题.

Answer 1

不确定，但这就是我对几乎所有动态图像所做的操作：

我制作了 a<div>并将其设置为我想要的任何大小，并将内联图像设置为 div 的 bg （因为大多数模板语言无法在 CSS 中设置）。

.ratio {
  width: 50vw;
}

.ratio-4-3 {
  padding-top: 75%;
}

.vh-100 {
  height: 100vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <div class="flex-child">
    <div class="ratio ratio-4-3"style="background: url('https://i.cdn.turner.com/adultswim/big/img/2018/05/07/rick-and-morty.jpg')no-repeat center center; background-size: cover;"></div>
  </div>
  
    <div class="flex-child">
    <div class="ratio vh-100"style="background: url('https://cnet3.cbsistatic.com/img/NMPqQxi-Gbz3JS9Q1BpqpMfG-AQ=/1600x900/2017/03/24/80d3cf97-5aae-4750-b856-53c89005dbc1/rickandmorty3.jpg')no-repeat center center; background-size: cover;"></div>
  </div>
  
</div>