Question

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

最有可能它会比fonts更宽，并且由于物体贴合覆盖而会隐藏其溢出。

当我尝试使用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>

但是，在某些情况下，您可能需要更精细的控制，因为宽高比和视口的宽度可能与所使用的图像不相关，因此您也应该注意宽度，这可以通过使用and运算符来完成按照您的@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

Answer 2

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

我制作一个.ratio { width: 50vw; } .ratio-4-3 { padding-top: 75%; } .vh-100 { height: 100vh; }并将其设置为所需的大小，然后将图像内联设置为div的背景色（导致您无法在CSS中设置大多数模板化语言）。

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

{{1}}

Answer 3

这是我使用动态影像和使用 object-fit：cover ：

来保留纵横比时遇到的问题的答案

IE and Edge fix for object-fit: cover;

我希望这可能对某人有所帮助。

Answer 4

这并没有具体回答这个问题，但是最后，如果没有任何帮助...一个人可以开箱即用，并且如果语义不是问题（通常是这样），那么仍然可以使用background-image，并根据媒体查询的条件进行渲染。如果没有匹配的媒体查询，它将不会在其中下载background-image，并且background-size的支持要好于object-fit。

Answer 5

您可以根据媒体查询提供srcset，首先确定图像的比例。那么您可以确定在每种屏幕尺寸的50vw中可见多少图像。

Answer 6

您可以像这样在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>

对象拟合：封面和Srcset

6 个答案: