html - 将图像放入 div

Question

我正在编写一个 HTML，其中有多个 div，其中一个 div 中有一个带有图像的自动 slider 。在这里我可以看到卷轴在继续，这里我有 3 个问题。

1. 我尝试创建如下结构。

---div#container
     --div#header
       -div#headTitle
       -div#companyLogo
     --div#content
       -div#leftBar
       -div#centerBar
       -div#rightBar

header 和 content 的 CSS 高度应分别为 20% 和 80%。不幸的是，这是行不通的。所以，我删除了 div#content 并将高度添加到 div#leftBar、div#centerBar 和 div#rightBar，这按预期工作。

1. 我在 figure 中只定义了 3 个图像，但在滚动中我看到第四个选项卡没有任何图像，只有纯色。
2. 图像出现在 slider 中，但是，如何使图像的高度与 div#centerTop 的高度相同。

请让我知道我在以上三个阶段哪里出了问题，我该如何解决。

这是一个工作 fiddle https://jsfiddle.net/462893qz/7/

谢谢

Answer 1

更新 fiddle :https://jsfiddle.net/462893qz/69/

您的 slider 动画中的数学计算不正确。你去了图形容器的 -400%，但里面只有 3 个元素。在 0 处，它显示第一张图像。在 -100% 时，它显示第二个。在 -200% 时它显示第三个。你不需要过去。这就是它显示纯色的原因。这只是背景。

您的图形容器宽度也设置为 500%，但只需要 3 个全 Angular 图像的空间。 (3x100)

为了使图像的高度等于#centerTop 容器，我们需要幻灯片的父容器为#centerTop 高度的 100%。然后我将 img 标签更改为具有完整图像背景的 div。这有助于我们保持图像比例并填充空间。但是，您需要用作横幅的图像，或者如果您没有预见到图像会发生变化，请在图像幻灯片 div 上设置纯色背景，使其看起来全宽。

您必须更新动画才能减少一步。

html {
    min-height: 100%;
    /* make sure it is at least as tall as the viewport */
    position: relative;
}

body {
    height: 100%;
    /* force the BODY element to match the height of the HTML element */
}

#container {
    background-color: lightgrey;
    border: 1px solid black;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1%;
    right: 1%;
    overflow: hidden;
    z-index: -1;
    /* Remove this line if it's not going to be a background! */
}

#header {
    height: 20%;
    color: green;
    border-bottom: 1px solid black;
}

#headTitle {
    position: absolute;
    display: inline-block;
}

#companyLogo {
    float: right;
}

#leftBar {
    background-color: red;
    width: 20%;
    height: 80%;
    float: left;
}

#centerBar {
    background-color: yellow;
    width: 60%;
    height: 80%;
    margin: 0 auto;
    float: left;
}

#rightBar {
    background-color: green;
    width: 20%;
    height: 80%;
    float: left;
}

#topRight {
    width: 100%;
    background-color: darkblue;
    height: 50%;
}

#bottomRight {
    width: 100%;
    background-color: lightblue;
    height: 50%;
}

#centerTop {
    height: 20%;
    background-color: lightblue;
    display: flex;
}

#centerBottom {
    height: 80%;
    background-color: navajowhite;
}


/** Slider Start*/

@keyframes slider {
    0% {
        left: 0;
    }
    30% {
        left: 0;
    }
    33% {
        left: -100%;
    }
    63% {
        left: -100%;
    }
    66% {
        left: -200%;
    }
    96% {
        left: -200%;
    }
    100% {
        left: -200%;
    }
}

#slider, figure {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#slider .slider-image {
    width: 33%; /* bc there are 3 images (100/3) */
    float: left;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#slider figure {
    position: relative;
    width: 300%; /* (3*100) */
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slider infinite;
}


/** Slider end*/

<div id="container">
    <div id="header">
        <div id="headTitle">
           
        </div>
        <div id="companyLogo">
           
        </div>
    </div>
    <div id="leftBar"></div>
    <div id="centerBar">
        <div id="centerTop">
            <div id="slider">
                <figure>
                  <div class="slider-image" style="background-image: url(https://preview.ibb.co/c5dKCc/luis.jpg)"></div>
                  <div class="slider-image" style="background-image: url(https://preview.ibb.co/e7KRsc/amazonlex.png)"></div>
                  <div class="slider-image" style="background-image: url(https://preview.ibb.co/ge9gQx/apiAi.jpg)"></div>
                </figure>
            </div>

        </div>
        <div id="centerBottom"></div>

    </div>
    <div id="rightBar">
        <div id="topRight"></div>
        <div id="bottomRight"></div>
    </div>
</div>