Question

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

然而，我不确定如何解决这个问题，因为我的照片都是两个方向 - 风景和肖像。

根据图像宽高比，图像尺寸和屏幕尺寸，某些图像的宽度最大，其他图像的宽度最大。

还有一些情况下，所有图像的宽度最大（首先考虑纵向）或高度（想想横向）。

tl; dr - 它永远不会总是宽度或高度最大化===它很复杂

我觉得如何把它写成尺寸属性的媒体查询？我甚至不知道从哪里开始。

对于Code和Visual Example，我创建了一支笔 - 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.
    }

在全屏图像轮播中拟合肖像和风景图像

1 个答案: