图像在较小的窗口(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>

try this:

.logoImage {
     margin-top:0;
   }

相关内容

最新更新

热门标签：