在全屏幕图像旋转木马中安装纵向和横向图像

Question

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

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

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

在某些情况下，所有图像都在宽度第一（考虑纵向方向）或高度第一（考虑横向方向）时达到最大值。

tl； dr-并不总是宽度或高度被最大化===这很复杂

我怎么能把它写为大小属性的媒体查询呢？我甚至不知道从哪里开始。

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

超文本标记语言

<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

因此，如果我理解正确，您应该能够通过对象匹配来实现这一点。

所以你可以试试这样的方法：

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