Question

我的CSS轮播代码存在问题。我有Javascript只是切换一些类，所以我知道这不是一个问题。我的问题是图像的高度没有按照我希望的方式缩放。我希望这个网站能够做出响应，第一步就是让这个全屏旋转木马工作。我正在制作一个寻呼机，所以我希望能够向下滚过传送带，但是当页面最初加载时，我希望它显示全屏旋转木马和NAV条。 NAV栏目前很好，但旋转木马在高度缩放方面存在问题。随着浏览器窗口变小，图像将变得比屏幕小，因此它不再是全屏。我不介意如果某些图像被切断但我希望旋转木板始终全屏，除非用户向下滚动或点击指向锚点的链接。

这是CSS：

/* General */
*{
box-sizing:border-box;
}

html {
    margin:0;
    padding:0;
    width:100vw;
/*  min-height:100vh;
*/
 }

body {
    width:100%;
    max-width:100%;
    min-height:100vh;
    margin:0;
    padding:60px 0 0 0;
    background-color:#333333;
    font-family: 'Varela Round', sans-serif;
}
/* ***Menu CSS*** */

/* -------------------------------------------
    Nav bar 
------------------------------------------- */ 
nav {
    background-color:rgba(22,22,22,0.7);
    position:fixed;
    top:0;
    left:0;
    right:0;
    height: 60px;
    text-align:center;
    z-index:2;
}

nav:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    border-style:solid;
    border-width:0 60px 60px 0;
    border-color:transparent #50C0C0 transparent transparent;
}

nav a {
    text-decoration:none;
    color:initial;
}
    nav .navButton {
        display:inline-block;
        color:#50C0C0;
        line-height:60px;
        padding:0 50px;
        position: relative;
    }
        nav .navButton:after {
            content:"";
            transition:width .5s, left .5s;
            -webkit-transition:width .5s, left .5s;
            -moz-transition:width .5s, left .5s;
            -o-transition:width .5s, left .5s;
            width:0;
            left:50%;
        }
        nav .navButton:hover:after {
            content:"";
            left:20%;
            height:1.5px;
            width:60%;
            background-color:#50C0C0;
            position:absolute;
            bottom:0;
            box-shadow: 0 -3px 15px #ffffff;
        }
    /* div around all nav buttons */
    nav .buttonWrapper {
        display:inline-block;
        text-align:center;
    }
/* ***Carousel css*** */

/* -------------------------------------------
    Carousel
------------------------------------------- */      
.carousel {
    width:100%;
    position:relative;
    height: 100%;
}

.carousel .imageContainer {
    position:absolute;
    transition:width .5s;
    -webkit-transition:width .5s;
    -moz-transition:width .5s;
    -o-transition:width .5s;
    overflow:hidden;
    width:100%;
}

    .carousel .imageContainer img {
        width: 100vw;
        min-width:100%; 
        min-height:100%;
    }

    .carousel .imageContainer.closed {
        width:0;
    }

    .carousel .imageContainer.open {
        width:100%;
    }

    .carousel .imageContainer.fromRight {
        right:0;
    }

    .carousel .imageContainer.fromLeft {
        left:0;
    }

Answer 1

为了保持您的旋转木马全屏，您需要设置宽度= 100％（当然），并且高度为100vh，这将保持旋转木板高度为视口的100％高度。应该做的伎俩。

#carousel{
 position:relavite;
  display:block;
  width:100%;
  margin-top:70px;
  height:calc(100vh - 70px);
  background:#000 url('http://lorempixel.com/1100/1100/sports/') no-repeat top center;
  background-size:cover;
  z-index:1;
}

*您可以考虑将旋转木马上的图像设置为背景图像，并将尺寸设置为覆盖。在我的例子中，我减去了导航的高度，所以旋转木马可以是高度的其余部分，并以边距向下推。

你可以在这里预览： https://plnkr.co/edit/4AsQ3PoM0Ze2gOFENsVG?p=preview

HTML，CSS全屏轮播

1 个答案: