调整Jumbotron视频高度

大家都在做什么？我在我制作的网站上遇到了麻烦。我想缩短jumbotron视频的高度。我将如何做到这一点？这是我的代码：调整Jumbotron视频高度

HTML

<body> 
    <nav></nav>  
    ..... 
    <!--Jumbotron--> 
    <div class="jumbotron"> 
     <!--Jumbotron Video--> 
     <video id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted"> 
      <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg"> 
     </video> 
     <!--Jumbotron Video Text--> 
     <div class="center jumbovidtext text-center"> 
      <!--Wrapper of the article--> 
      <article> 
       <h2 class="txtjumbo">Welcome to</h2> 
       <h1 class="txtjumbo" id="bigone">St. Augustine Pediatrics Associates</h1> 
       <p class="txtjumbo">Our physicians and our staff strive to keep the personal approach of small-town care you had as a child. We understand the struggles of busy life. We care about the overall health and well-being of our patients and their families.</p> 
       <button type="button" class="btn btn-danger btn-lg"> 
        <span class="glyphicon glyphicon-file" aria-hidden="true"></span>&nbsp &nbspNew Patient Registration 
       </button> 
       <br><br> 
       <button class=glyph-down-button><span class="glyphicon glyphicon-circle-arrow-down" font-size: "100em"aria-hidden="true" href="#" opacity=.80> </span></button> 
      </article> <!--End of Article--> 
     </div> <!--End of Jumbo Vid Text--> 
    </div> <!--End of Jumbotron--> 
</body>

CSS

body { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    margin-bottom: 60px; 
} 

.jumbotron { 
    background: transparent; 
    margin: 24vh 0; 
    overflow-y: hidden; 
    bottom: auto; 
} 

#txtjumbo{/*This feels useless*/ 
    background-color: transparent; 
    z-index: 2; 
} 

article{ 
    background: #ffffff; 
    opacity: .75; 
    z-index: 1; 
} 

#bg-video { 
    top: 0px; 
    left: 0px; 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    opacity: 0.80; 
    background: transparent; 
} 

.glyph-down-button{ 
    background: transparent; 
    border: none; 
} 

.glyphicon.glyphicon-circle-arrow-down { 
    font-size: 30px; 
}

目前，它看起来像这样：

我试图调整视频的高度和/或者超大号，但它会把整个页面弄乱。

我想知道如何让视频不是完整的浏览器高度，因为有一些有用的信息低于哪些网站访问者可能不打扰看。什么是最好的方法来做到这一点？

我将不胜感激的任何建议。谢谢！

来源

2016-12-15 buruguduystunstuguduystuy

要调整Jumbotron高度，您可以直接使用css并使用min-height: npx;，其中n是您的偏好数。

在你的代码：

.jumbotron { 
    background: transparent; 
    margin: 24vh 0; 
    overflow-y: hidden; 
    bottom: auto; 
    min-height: 100px; 
}

使用这个属性，它会自动调整视频的超大屏幕，太推文。

P.S：在超大屏幕文本类中，jumbovidtext没有在你的CSS文件中定义的，所以它可能只是工作作为一个正常的股利，而不是作为第二超大屏幕。

来源

2016-12-16 14:14:27 Katreque

调整Jumbotron视频高度

回答

相关问题