html - 使超大屏幕根据屏幕尺寸自动调整大小(同时添加滚动按钮)

我想让图像填满屏幕。

我已经研究了几种方法来做这样的事情，但我似乎无法让任何事情发挥作用。

我还想在“了解更多”超链接中添加一个滚动功能，以便平滑地向下滚动页面。

我已将元素更改为占位符并将其上传到 CodePen。

这里是:

(另请注意，它还使用我的 photoshop 许可证附带的 typekit，因此它可能不适合您，并且在我的 wampp 设置中标题文本是白色而不是灰色。

    <html>

    <head>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
      <link rel="stylesheet" href="CSS/main.css">
      <script src="https://use.typekit.net/pzl7njn.js"></script>
      <script>try{Typekit.load({ async: false });}catch(e){}</script>
      <script src=JS/jquery.scrollex></script>
      <script src=JS/jquery.scrollex></script>
      </head>

      <body>
      <div class="menu-wrap">
      <nav class="menu">
      <ul class="clearfix">
        <li class="current-item"><a href="#">Home</a></li>
        <li>
          <a href="#">Dropdown <span class="arrow">&#9660;</span></a>

          <ul class="sub-menu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4 &amp; 5</a></li>
            </ul>
            </li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            </ul>
            </nav>
            </div>
            </div>
            <div class="jumbotron">
            <div class="container">
            <h1>Lorem Ipsum</h1>
            <p>Dolor sit Amet.</p>
            <a href="#one" class="next">Start</a>
            </div>
            </div>
            <section id=one>
            <div class="Thumbnails">
            <div class="container">
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pulvinar neque, gravida ultrices sem. Cras congue dapibus tortor, a condimentum magna pharetra at. Quisque scelerisque ullamcorper eros, eu vulputate justo aliquet id. Praesent
          auctor interdum odio vel suscipit. Integer placerat vitae odio tempus commodo. Morbi mollis ex justo, nec pulvinar lectus finibus at. Maecenas scelerisque est in nulla viverra, vel cursus elit sollicitudin.</p>
        <div class="row">

          <div class="col-md-4">
            <div class="thumbnail">
              <img src="http://www.engraversnetwork.com/files/placeholder.jpg">
            </div>

            <div class="thumbnail">
              <img src="http://www.engraversnetwork.com/files/placeholder.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="http://www.engraversnetwork.com/files/placeholder.jpg">
            </div>

            <div class="thumbnail">
              <img src="http://www.engraversnetwork.com/files/placeholder.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="http://www.engraversnetwork.com/files/placeholder.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>
      </section>
      <div class="learn-more">
      <div class="container">
        <div class="row">
        <div class="col-md-4">
          <h3>Lorem ipsum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pulvinar neque, gravida ultrices sem. Cras congue dapibus tortor, a condimentum magna pharetra at. Quisque scelerisque ullamcorper eros, eu vulputate justo aliquet id. Praesent
            auctor interdum odio vel suscipit. Integer placerat vitae odio tempus commodo. Morbi mollis ex justo, nec pulvinar lectus finibus at. Maecenas scelerisque est in nulla viverra, vel cursus elit sollicitudin.</p>
          <p><a href="#">Lorem ipsum</a></p>
        </div>
        <div class="col-md-4">
          <h3>Lorem ipsum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pulvinar neque, gravida ultrices sem. Cras congue dapibus tortor, a condimentum magna pharetra at. Quisque scelerisque ullamcorper eros, eu vulputate justo aliquet id. Praesent
            auctor interdum odio vel suscipit. Integer placerat vitae odio tempus commodo. Morbi mollis ex justo, nec pulvinar lectus finibus at. Maecenas scelerisque est in nulla viverra, vel cursus elit sollicitudin.</p>
          <p><a href="#">Lorem ipsum</a></p>
        </div>
        <div class="col-md-4">
          <h3>Lorem ipsum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pulvinar neque, gravida ultrices sem. Cras congue dapibus tortor, a condimentum magna pharetra at. Quisque scelerisque ullamcorper eros, eu vulputate justo aliquet id. Praesent
            auctor interdum odio vel suscipit. Integer placerat vitae odio tempus commodo. Morbi mollis ex justo, nec pulvinar lectus finibus at. Maecenas scelerisque est in nulla viverra, vel cursus elit sollicitudin.</p>
          <p><a href="#">Lorem ipsum</a></p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>


.jumbotron {
  background-image:url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
  height: 1000px;
  background-repeat: no-repeat;
}

.jumbotron .container {
  position: relative;
  left: auto;
  right: auto;
  text-align: center;
  margin-top: 100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 84px;  
  font-family: "industry",sans-serif;
  font-style: normal;
  font-weight: 900;
  text-shadow: 3px 3px #000;
}

.jumbotron p {
  font-size: 24px;
font-family: "industry",sans-serif;
font-style: italic;
font-weight: 1000;
text-shadow: 3px 3px #000;
color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}
.Thumbnails {
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}
.Thumbnails h2 {
    color: #393c3d;
    font-size: 24px;
}
.Thumbnails p {
    font-size: 15px;
    margin-bottom: 13px;
}

/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/

.clearfix:after {
    display:block;
    clear:both;
}

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    background:#DAE6EB;
    margin:0px auto
}

.menu {
    width:1000px;
    margin:0px;
    margin-bottom: -100px;
    opacity:5;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family:'industry';
    font-size: 18px;
}

.menu a {
    transition:all linear 0.15s;
    color:#98a1a4;
    font-size: 18px;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#414546;
    font-size: 18px;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size: 18px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#98a1a4;
}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    background:#98a1a4B;
}

.sub-menu li {
    display:block;
    font-size: 18px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
        font-size: 18px;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#98a1a4;
}

最佳答案

“超大屏幕”图像具有以下 CSS:

height: 1000px;

如果您想让图像与屏幕大小相同，请尝试改用 100% 或 100vh。

这应该可以解决问题:

.jumbotron .container {
  position: relative;
  left: auto;
  right: auto;
  height:100vh;
  width: 100vw;
  padding:100px 0;
  text-align: center;
}

关于你问题的第二部分——我相信这已经在这里得到了回答:

How to make a scrolable div scroll on click and mouseover using jQuery

关于html - 使超大屏幕根据屏幕尺寸自动调整大小(同时添加滚动按钮)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34584950/

html - 使超大屏幕根据屏幕尺寸自动调整大小(同时添加滚动按钮)

上一篇：javascript - Highcharts 的宽度无法填满父级的 100%

下一篇：html - 如何使wordpress div与页面顶部对齐？