我正在创建一个全屏灯箱幻灯片/轮播,并使用 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%;
}
最佳答案
因此,如果我理解正确 - 您应该能够通过 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.
}
关于html - 在全屏图像轮播中拟合纵向和横向图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36754334/