调整页面大小时，文本不会与图像滑块保持一致

Question

我有一个纯 CSS 图像滑块和它下面的一段文本加页脚等。调整页面大小时，图像滑块会整齐地调整大小，其下方的所有内容也会调整大小，但图像滑块会远离文本块和所有内容，而文本块和其他所有内容都会保持不变。我试过弄乱图像滑块和该部分的定位，但最终一切都破坏了图像滑块或导致重叠。我在做什么 wrong/how 我可以让它工作吗，以便当浏览器调整大小并且滑块变小时，文本块和它下面的所有其他内容都停留在滑块的底部并且整个页面垂直收缩以匹配滑块在调整大小时如何垂直收缩？请忽略任何看起来很滑稽的 buttons/links 或其他任何东西，因为我只包含用于图像滑块和其余文本的代码，以免使我包含的 fiddle 与不包含的代码混淆需要修理。我知道不要在页面中包含静态 URL，但如果我不指定它们的确切位置，图像将不会加载到 fiddle。

如果您想查看测试页面运行，请在 Rack Inspections test page。

:root {
    --ORANGE: #FA6114;
    --BLUE: #0000FF;
    --GREY: #787878;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    max-width: 100vw;
}

body {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    color: var(--GREY);
}

.orange {
    color: var(--ORANGE);
}

.blue {
    color: var(--BLUE);
}

.grey {
    color: var(--GREY);
}

.wrapper {
    flex: 1 0 auto;
}

header {
    margin: 0 auto;
    height: 150px;
    position: relative;
    max-width: 100vw;
}

nav {
    max-width: 100vw;
    vertical-align: bottom;
    outline: none;
    position: relative;
    list-style-type: none;
    font-size: 22px;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    margin-right: 30px;
    cursor: pointer;
    text-align: center;
    float: right;
    top: 15px;
}

nav a, nav a:link, nav a:visited, nav a:hover {
    outline: none;
    text-decoration: none;
    color: var(--GREY);
}

nav a:active {
    color: var(--ORANGE);
}

nav a:hover {
    color: var(--BLUE);
}

ul#nav li {
    display: inline-block;
    padding: 0 19px;
}

section {
    max-width: 100vw;
    background: WHITE;
    font-size: 13px;
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    position: relative;
    cursor: default;
}

.SecTitle {
    font-size: 40px;
    margin-bottom: 15px;
}

.LinkCurrent {
    color: var(--ORANGE);
    cursor: default;
}

.logo {  
    position: relative;
    top: 15px;
    left: 30px;
    max-width: 100vw;
    height: auto;
}

article {
    position: relative;
    font-size: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;

}

.services {
    font-size: 20px;
    text-align: center;
    display: block;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

.PHSRLink {
    display: inline-block;
    margin: 0 25px 0 25px;
}

.inspectionsLink {
    display: inline-block;
    margin: 0 25px 0 25px;
    vertical-align: top;
}

.PHSRTitle {
    font-family: Century Gothic, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 40px;
    font-weight: bold;
}

footer {
    flex-shrink: 0;
    display: block;
    float: right;
    position: relative;
    color: var(--GREY);
    font-family: Century Gothic, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    text-align: right;
    padding: 100px 20px 20px 0;
}

footer a:link {
    color: var(--ORANGE);
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

footer a:visited {
    color: var(--ORANGE);
    text-decoration: underline;
}

footer a:hover {
    color: var(--BLUE);
    text-decoration: underline;
}

/* Image Slider */
#slider {
    max-width: 100vw;
    width: 952px;
    height: 409px;
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}

        <div id="wrapper">
            <header>
                <img class="logo" src="http://www.cafenocturne.com/RackInspections/images/logo.png" alt="Rack Inspections - Click to return to main page">
            <nav>
                    <ul id="nav">
                        <li class="LinkCurrent">HOME</li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="contact.html">CONTACT US</a></li>
                    </ul>
            </nav>
            </header>

            <section>
                <div id="slider">
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide1.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide2.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide3.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide4.png')"></div>
                </div>

                <article>
                    Rack Inspections process gives our clients a greater understanding of rack storage systems, best practices and safety awareness to ensure that your company is in compliance with all safety regulations. In addition, we provide straight forward racking inspections with detailed recommendations.<br>
                </article>

                <div class="services">
                    <div class="PHSRLink">
                        <div class="SecTitle orange">PHSR</div>
                        <img width="268" height="133" alt="Pre-Start Health and Safety Review image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-1-GUY.png"><br><br>
                        PHSR (Pre-Start Health &amp; Safety Review)?<br>
                        We can help.<br><br>
                        <a href="PHSR.html" class="button" title="Click here to read more about PHSR">READ MORE</a><br><br>
                    </div>

                    <div class="inspectionsLink">
                        <div class="SecTitle orange">Inspections</div>
                        <img width="268" height="133" alt="Inspections image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-2-Wrench.png"><br><br>
                        Rack inspections identify safety concerns<br>
                        and deficiencies with rack storage systems.<br><br>
                        <a href="inspections.html" class="button" title="Read more about our inspection process">READ MORE</a>
                    </div>
                </div>
            </section>

            <footer>
                <a href="mailto:info@rackinspections.ca" title="Click here to send us an email."><span class="orange">info<span class="blue">@rackinspections</span>.ca</span></a><br>
                Copyright <script>document.write(new Date().getFullYear())</script><br>
                All Rights Reserved.<br>
                <span style="font-size: 10px;">Designed by RackInspections.ca</span>
            </footer>
        </div>

Answer 1

当使用 background-size and specifically contain, the replaced content is scaled as large as possible maintaining its aspect ratio while fitting within the element’s content box. Because of this, a situation called letterboxing 时发生，这是一个很好的例子。 #slider 的初始高度为 409px，虽然它“适合”较大的视口，但对于较小的视口，滑块中的图像并未占据 409px 显式高度的 100%，导致图像之间出现一堆空白和 <article> 文本。

如果您改为在 #slider > div 元素上使用 background-size: cover，则替换内容的大小会在填充元素的整个内容框时保持其纵横比。现在，文本将始终位于所有视口宽度的图像滑块下方。为了使 #slider 高度更具响应性（即不总是 409px），您可以将绝对单位值与相对长度单位交换，例如 vh，以便浏览器动态计算其高度。

:root {
    --ORANGE: #FA6114;
    --BLUE: #0000FF;
    --GREY: #787878;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    max-width: 100vw;
}

body {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    color: var(--GREY);
}

.orange {
    color: var(--ORANGE);
}

.blue {
    color: var(--BLUE);
}

.grey {
    color: var(--GREY);
}

.wrapper {
    flex: 1 0 auto;
}

header {
    margin: 0 auto;
    height: 150px;
    position: relative;
    max-width: 100vw;
}

nav {
    max-width: 100vw;
    vertical-align: bottom;
    outline: none;
    position: relative;
    list-style-type: none;
    font-size: 22px;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    margin-right: 30px;
    cursor: pointer;
    text-align: center;
    float: right;
    top: 15px;
}

nav a, nav a:link, nav a:visited, nav a:hover {
    outline: none;
    text-decoration: none;
    color: var(--GREY);
}

nav a:active {
    color: var(--ORANGE);
}

nav a:hover {
    color: var(--BLUE);
}

ul#nav li {
    display: inline-block;
    padding: 0 19px;
}

section {
    max-width: 100vw;
    background: WHITE;
    font-size: 13px;
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    position: relative;
    cursor: default;
}

.SecTitle {
    font-size: 40px;
    margin-bottom: 15px;
}

.LinkCurrent {
    color: var(--ORANGE);
    cursor: default;
}

.logo {  
    position: relative;
    top: 15px;
    left: 30px;
    max-width: 100vw;
    height: auto;
}

article {
    position: relative;
    font-size: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;

}

.services {
    font-size: 20px;
    text-align: center;
    display: block;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

.PHSRLink {
    display: inline-block;
    margin: 0 25px 0 25px;
}

.inspectionsLink {
    display: inline-block;
    margin: 0 25px 0 25px;
    vertical-align: top;
}

.PHSRTitle {
    font-family: Century Gothic, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 40px;
    font-weight: bold;
}

footer {
    flex-shrink: 0;
    display: block;
    float: right;
    position: relative;
    color: var(--GREY);
    font-family: Century Gothic, Geneva, Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    text-align: right;
    padding: 100px 20px 20px 0;
}

footer a:link {
    color: var(--ORANGE);
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

footer a:visited {
    color: var(--ORANGE);
    text-decoration: underline;
}

footer a:hover {
    color: var(--BLUE);
    text-decoration: underline;
}

/* Image Slider */
#slider {
    --h: 60;
    max-width: 100vw;
    width: 952px;
    height: 45vh; /* Vary this */
    height: calc(var(--h) * 1vmin); /* responsive unit */
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}

<div id="wrapper">
            <header>
                <img class="logo" src="http://www.cafenocturne.com/RackInspections/images/logo.png" alt="Rack Inspections - Click to return to main page">
            <nav>
                    <ul id="nav">
                        <li class="LinkCurrent">HOME</li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="contact.html">CONTACT US</a></li>
                    </ul>
            </nav>
            </header>

            <section>
                <div id="slider">
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide1.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide2.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide3.png')"></div>
                    <div style="background-image:url('http://www.cafenocturne.com/RackInspections/images/slide4.png')"></div>
                </div>

                <article>
                    Rack Inspections process gives our clients a greater understanding of rack storage systems, best practices and safety awareness to ensure that your company is in compliance with all safety regulations. In addition, we provide straight forward racking inspections with detailed recommendations.<br>
                </article>

                <div class="services">
                    <div class="PHSRLink">
                        <div class="SecTitle orange">PHSR</div>
                        <img width="268" height="133" alt="Pre-Start Health and Safety Review image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-1-GUY.png"><br><br>
                        PHSR (Pre-Start Health &amp; Safety Review)?<br>
                        We can help.<br><br>
                        <a href="PHSR.html" class="button" title="Click here to read more about PHSR">READ MORE</a><br><br>
                    </div>

                    <div class="inspectionsLink">
                        <div class="SecTitle orange">Inspections</div>
                        <img width="268" height="133" alt="Inspections image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-2-Wrench.png"><br><br>
                        Rack inspections identify safety concerns<br>
                        and deficiencies with rack storage systems.<br><br>
                        <a href="inspections.html" class="button" title="Read more about our inspection process">READ MORE</a>
                    </div>
                </div>
            </section>

            <footer>
                <a href="mailto:info@rackinspections.ca" title="Click here to send us an email."><span class="orange">info<span class="blue">@rackinspections</span>.ca</span></a><br>
                Copyright <script>document.write(new Date().getFullYear())</script><br>
                All Rights Reserved.<br>
                <span style="font-size: 10px;">Designed by RackInspections.ca</span>
            </footer>
        </div>

调整页面大小时，文本不会与图像滑块保持一致

Text won't stay with image slider when page is resized

html

css

carousel