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

Posted 2023-03-05

【中文标题】在全屏图像轮播中拟合纵向和横向图像

【英文标题】：Fitting portrait and landscape images in a full screen image carousel

【发布时间】：2016-08-13 18:05:11

【问题描述】：

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

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

根据图像纵横比、图像尺寸和屏幕尺寸，某些图像将首先在宽度处达到最大值，而在其他图像处达到高度。

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

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

我该怎么写这个作为 size 属性的媒体查询？我什至不知道从哪里开始。

对于代码和视觉示例，我创建了一支笔 - 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%;

【问题讨论】：

我相信，如果您以某种方式预先将图片标记为纵向或横向（例如班级或?p 与?l at src 的末尾），然后选择它（max- 大小作为完整视口）。要么这样，要么你将不得不为此处理 JS，因为我不相信 CSS 可以自然地看到它，@media 会变得混乱。

取而代之的是，假设您通过background-image 而不是img 标签指定图像，请查看***.com/questions/11757537/…

答案是：您需要知道图像的高度和宽度。 ***.com/questions/29778235/…

@abluejelly - 我已经更新了一个 codepen 的链接，希望能展示我的问题

@alexanderfarkas - 我已经更新了一个 codepen 的链接，希望能展示我的问题

【参考方案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.