24

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

它很可能会比 更宽，50vw并且由于适合对象的覆盖，它的溢出将被隐藏。

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

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

4

5 回答 5

2
于 2020-08-13T07:23:18.280 回答
0

您可以像这样在 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>
于 2020-09-28T23:12:01.600 回答
0

您可以根据媒体查询给出 srcset，首先弄清楚图像的比例。然后您可以确定在每个屏幕尺寸的 50vw 中可以看到多少图像。

于 2020-06-20T07:44:46.360 回答
-1

这并没有具体回答这个问题，但最后，如果没有任何帮助......人们可以开箱即用并且如果语义不是问题（通常是这样），那么人们仍然可以使用background-image并让它通过媒体查询有条件地呈现。如果媒体查询不匹配，它将不会下载background-image内部并且background-size比object-fit无论如何都有更好的支持。

于 2020-05-26T15:05:49.903 回答
-2

不确定，但这是我为几乎所有动态图像所做的：

我制作了一个<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>

于 2019-01-28T22:57:09.667 回答