调整 constantly-changing 图片以适应 size-changing 屏幕，使用 CSS

Question

我有一张图片幻灯片。它由几个部分组成：

黑色背景
屏幕底部的细条显示当前图像的标题（未指定字体大小和一般垂直尺寸）
一个用于全屏显示幻灯片或退出全屏（如果已经是）的按钮，位于底部栏上
黑色背景下的一组三张图片，占据所有可用空间 space，同时保持宽高比。

图像彼此叠加，'front'、'middle' 和 'back' 的角色相互交替。 'middle' 图像的不透明度为 1，其他图像的不透明度为 0。每隔几秒，一个 Javascript 函数将当前 'back' 图像指定为新的 'middle' 和 'middle' 图像作为新的 'front'，相应地改变它们的不透明度（CSS t运行sition 在下一秒过去，使它们相互淡化）。以前在 'front' 中的图像被放弃，新图像被加载到 'back' 中（通过直接更改 src 属性）。

我希望这些图像 填满整个屏幕 space 可供他们使用 - 除了底栏之外的所有内容 - 同时保持它们的外观比率。图像大小的下限决定了图像的大小。同时，图像需要在它们未填充的任何维度居中（因此，高图像水平居中，宽图像垂直居中）。此外，图像需要适应不断变化的屏幕尺寸，最好是因为 window尺寸被拖动。

我目前正在使用冗长的 Javascript 函数来 (1) 通过从屏幕高度中减去底栏的高度来找到可用的 space，(2) 计算纵横比图像，（3）比较哪个尺寸是限制因素，以及（4）相应地调整元素的大小和位置。此函数由 window.onresize 事件触发，并在图像发生变化时手动触发。但是，当 clicking-and-dragging 更改 window 大小时，该函数会被一遍又一遍地调用。这是不必要的计算密集型，如果可能的话，我想在 CSS 中更改大小。

当我运行为正常显示图片的网站遇到这个问题时，我的解决方案是calc():

img.class {
    font-size:24pt; /* same font size as h1, which is the biggest title element. Used to calculate em */
    max-width: calc(100vw - 80px);  /* exactly enough to account for horizontal margins/padding */
    max-height: calc(100vh - 2em);  /* leave space for title but otherwise fill window */
}

那个和这个的区别在于唯一限制因素是屏幕尺寸，我确切地知道"supposed"适合的其他元素有多大在屏幕上。整个 parent 元素居中（当然水平居中很容易），而且由于屏幕应该滚动，所以我根本不必担心垂直居中。所以这个解决方案在这里不能重复使用，我不认为。

我尝试的直观解决方案是将水平和垂直对齐放在 parent <div> 中，并根据百分比设置 max-width 和 max-height（因为我无法在 CSS 中获得不同元素的高度来进行数学运算）：

#parent{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: relative;
    padding: 0;
    margin: 0;
}

img {
    transition: opacity 1s;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

但这不仅没有让图像居中，还让它们根本不出现！从 <img> 中删除 max-width 和 max-height 使图像出现但溢出屏幕的两侧和下方的导航栏，这也不是我想要的。如何使用 CSS 而不是冗长的 JavaScript 正确完成此任务？

Answer 1

我认为这种布局结构符合您的所有要求。这里有三张不同大小的图像，我降低了不透明度，这样你就可以看到它们是如何一起缩放的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        body {
            margin: 0;
        }

        .images {
            position: relative;
            height: 100%;
        }
    .image {
        position: absolute; 

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;

        width: 100%;
        height: 100%;

        opacity: 0.5;

    }
    .image-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.footer {
    background-color: black;
    color: white;
    height: 50px;
    width: 100%;
    margin-top: auto;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="images">
            <div class="image-container">
                <div class="image" style="background-image: url(https://unsplash.it/1000/425)"></div>
                <div class="image" style="background-image: url(https://unsplash.it/640/1000)"></div>
                <div class="image" style="background-image: url(https://unsplash.it/800/800)"></div>
            </div>
        </div>
        <div class="footer">Content</div>
    </div>
</body>
</html>

调整 constantly-changing 图片以适应 size-changing 屏幕，使用 CSS

Resize constantly-changing image to fit size-changing screen, using CSS

html

javascript

css

resize