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

Question

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

但是，我不确定如何解决这个问题，因为我的图片有两种方向 - 横向和纵​​向。

根据图像纵横比、图像大小和屏幕大小，某些图像的宽度将首先最大化，而其他图像的高度将最大化。

在某些情况下，所有图像首先在宽度（考虑纵向）或高度（考虑横向）上最大化。

tl; dr - 宽度或高度永远不会达到最大值 === 这很复杂

我怎么想把它写成一个针对 size 属性的媒体查询？我什至不知道从哪里开始。

对于代码和可视化示例，我创建了一支钢笔 -转到钢笔

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