jquery - 图像在较小的窗口向上滑动(Bootstrap)

标签 jquery html css twitter-bootstrap

我有一个 class=img-responsive 的图像，在较小的窗口上，它向上滑动并变得比我想要的要小。我需要在手机、ipad 等较小的屏幕上显示适当大小的图像。

截图如下:

正常尺寸: http://s27.postimg.org/4yhdspz4z/Screen_Shot_2015_08_18_at_18_09_51.png

在较小的屏幕上: http://s9.postimg.org/hzu7hdsan/Screen_Shot_2015_08_18_at_18_10_02.png

这是我的代码:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Ajans 1000</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->



    <style>

    .navbar-default {
    background-color: #da7600;
    }

    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: white;  /*Sets the text hover color on navbar*/
    }

    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
    a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: white; /*BACKGROUND color for active*/
    background-color: #3fbcd7;
    border-color: #3fbcd7;
    }

    .nav > li > a:hover,
    .nav > li > a:focus {
        text-decoration: none;
        background-color: #3fbcd7; /*Change rollover cell color here*/
    }


    .navbar-default .navbar-nav > li > a {
    color: white; /*Change active text color here*/
    }

    .navbar-default .navbar-header .navbar-toggle:hover, .navbar-default .navbar-header .navbar-toggle:focus  {
    background-color:#3fbcd7;
    }

    .navbar-default .navbar-toggle .icon-bar {
    background-color: white;
    }


    #firstContainer {
    background-image:url(bg_yaziylabin.png);
    background-size:cover;
    width:100%;
    background-position:center;
    margin-top:10px;
    }

    #secondContainer {
    background-image:url(yaziylabin_part2.png);
    background-size:center;
    width:100%;
    background-position:center;
    background-repeat:no-repeat;
    }

    .headerImage {
    margin-top:50px;
    }

    .logoImage {
    margin-top:-10px;
    }

    </style>

</head>
<body data-spy="scroll" data-target=".navbar-collapse">

    <div class="navbar navbar-default navbar-fixed-top">

            <div class="container">   

                <div class="navbar-header"> 


                    <a class="navbar-brand" href="http://www.yaziylabin.com">
                    <img style="max-height:25px; margin-top:-3px; padding-right:10px;" src="yaziylabin_logo.png" />
                    </a>

                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" />

                        <span class="sr-only"> Toggle Navigation </span>

                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>


                </div>

                    <div class="collapse navbar-collapse">

                        <ul class="nav navbar-nav">

                            <li class="active"> <a href="#secondContainer"> Biz Kimiz, Ne Yaparız ? </a> </li>
                            <li> <a href="#thirdContainer"> Yardımcı Olabileceğimiz Konular </a> </li>
                            <li> <a href="#fourthContainer"> Referanslarımız </a> </li>
                            <li> <a href=""> İletişim </a> </li>    

                        </ul>

                </div>      

        </div>

    </div>


        <div class="container" id="firstContainer"> 

            <div class="row">

                    <img class="logoImage img-responsive center-block" src="yaziylabin_yazi.png" />

            </div>

        </div>


        <div class="container" id="secondContainer">

            <div class="row">

            </div>

        </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script>

        $("#topContainer").css("min-height", $(window).height());

        $("#firstContainer").css("min-height", 0.55*($(window).height()));

        $("#secondContainer").css("min-height", $(window).height());

        $("#thirdContainer").css("min-height", $(window).height());

        $("#fourthContainer").css("min-height", $(window).height());

    </script>



  </body>
</html>

最佳答案

尝试这样的事情，因为它是导致它的导航栏:

body {
    margin-top: 70px;
}


$("#topContainer").css("min-height", $(window).height());

$("#firstContainer").css("min-height", 0.55 * ($(window).height()));

$("#secondContainer").css("min-height", $(window).height());

$("#thirdContainer").css("min-height", $(window).height());

$("#fourthContainer").css("min-height", $(window).height());
body,
html {
  margin-top: 70px;
}
.navbar.navbar-default {
  background-color: #da7600;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
  color: white;
  /*Sets the text hover color on navbar*/
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
  color: white;
  /*BACKGROUND color for active*/
  background-color: #3fbcd7;
  border-color: #3fbcd7;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
  text-decoration: none;
  background-color: #3fbcd7;
  /*Change rollover cell color here*/
}
.navbar.navbar-default .navbar-nav > li > a {
  color: white;
  /*Change active text color here*/
}
.navbar.navbar-default .navbar-header .navbar-toggle:hover,
.navbar.navbar-default .navbar-header .navbar-toggle:focus {
  background-color: #3fbcd7;
}
.navbar-default .navbar-toggle .icon-bar {
  .navbar background-color: white;
}
#firstContainer {
  background-image: url(bg_yaziylabin.png);
  background-size: cover;
  width: 100%;
  background-position: center;
  margin-top: 10px;
}
#secondContainer {
  background-image: url(yaziylabin_part2.png);
  background-size: center;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.headerImage {
  margin-top: 50px;
}
.logoImage {
  margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target=".navbar-collapse">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="http://www.yaziylabin.com">
          <img style="max-height:25px; margin-top:-3px; padding-right:10px;" src="http://placehold.it/350x150" />
        </a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" /> <span class="sr-only"> Toggle Navigation </span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"> <a href="#secondContainer"> Biz Kimiz, Ne Yaparız ? </a> 
          </li>
          <li> <a href="#thirdContainer"> Yardımcı Olabileceğimiz Konular </a> 
          </li>
          <li> <a href="#fourthContainer"> Referanslarımız </a> 
          </li>
          <li> <a href=""> İletişim </a> 
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container" id="firstContainer">
    <div class="row">
      <img class="logoImage img-responsive center-block" src="http://placehold.it/1150x500" />
    </div>
  </div>
  <div class="container" id="secondContainer">
    <div class="row"></div>
  </div>

关于jquery - 图像在较小的窗口向上滑动(Bootstrap)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32076664/

上一篇：html - 页脚内部 div 的对齐方式

下一篇：javascript - 试图用水平滚动条制作固定的表头。如何设置溢出 : auto, 但保持边距透明？

相关文章：

javascript - jquery 不隐藏类并在单击时设置动画

html - 将表格单元格 div 的边框粘贴到表格布局中的包装器 div

jquery - 内联日期选择器上的 beforeshow 和 beforeshowday

javascript - 存储在变量中的 HTML 中的 jQuery 更改属性

javascript - 未捕获的引用错误 : alertbox with value from a list

php - Javascript 文件未在 Wordpress 中加载

javascript - 从 html 中分离元素样式

javascript - 使用 javascript 4 上传图像

javascript - 增加图表 js 中 x 轴和第一个水平条之间的空间

javascript - 如何在dojo中通过选择器查找父元素

©2024 IT工具网  联系我们