html - 在全屏图像轮播中拟合纵向和横向图像

Question

我正在创建一个全屏灯箱幻灯片/轮播，并使用 srcset 来提供最合适的图像。

但是，我不确定如何解决这个问题，因为我的照片是横向和纵向的。

根据图片的纵横比、图片大小和屏幕大小，它会先为某些图片以宽度为最大，为另一些图片以高度为先。

还有一些情况是所有图像首先在宽度(考虑纵向)或高度(考虑横向)时达到最大。

tl;dr - 宽度或高度永远不会达到极限 === 这很复杂

我到底怎么想把它写成 sizes 属性的媒体查询？我什至不知道从哪里开始。

对于代码和视觉示例，我创建了一支笔 - Go to Pen

HTML

<div class="container">
  <img src="image.jpg">
</div>
<div class="container">
  <img src="image-2.jpg">
</div>

CSS

.container {
  display: flex;
  height:100vh;
  width:100vw;
  justify-content: center;
  align-items: center;
}

img {
  display: block;
  max-width:100%;
  max-height:100%;
}

Answer 1

因此，如果我理解正确 - 您应该能够通过 Object-fit 实现这一目标。

所以你可以尝试这样的事情:

    ...
    img {
    height: 100%;
    width: 100%;
    max-height: 100vh;
    max-width: 100vh;
    object-fit: contain; // this will fill the view window without losing aspect ratio.
    }