Bootstrap：调整移动设备的背景图片大小

时间：2017-06-23 21:46:11

标签： css twitter-bootstrap media-queries

我正在修改使用@media（max-width）查询的Bootstrap模板。桌面响应视图中的背景图像看起来很好。但是图像被水平（左和右）切断以用于移动响应视图，如下所示。即使在响应式设计模式或iPhone上查看，看起来仍然使用桌面媒体查询。

用于桌面和移动设备的桌面媒体查询是

header.carousel {
    height: 80%;
}

我尝试使用!important更改移动媒体查询，但似乎并未强制使用此媒体查询。

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 60%!important;
    }
}

我可以将桌面媒体查询高度更改为在移动设备上正确显示的较低值，但桌面视图将垂直切割（顶部和底部）。

任何人都有解决方案吗？

bootstrap mobile cropped

完整代码位于

之下 

/*!
 * Start Bootstrap - Modern Business (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */


/* Global Styles */

html,
body {
  height: 100%;
}

body {
  padding-top: 50px;
  /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}


/*.navbar-brand.img {
    max-width: 100%;
    max-height: 100%;
}*/


/*a.dropdown-toggle*/

.navbar-nav>li>a {
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 16px;
}


/*.navbar-nav>li>a {
    line-height: 35px;
}*/


/*a.dropdown-toggle {
    font-size: 16px;
}*/

img.logo {
  max-width: 100%;
  max-height: 100%;
}

a.navbar-brand {
  height: 70px;
  /*line-height: 35px;*/
}


/*a.navbar-brand.title {
    font-size: 20px;
}*/

.img-portfolio {
  margin-bottom: 30px;
}

.img-hover:hover {
  opacity: 0.8;
}


/* Home Page Carousel */

header.carousel {
  /*height: 50%;*/
  height: 80%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
  height: 100%;
}

header.carousel .fill {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}


/* 404 Page Styles */

.error-404 {
  font-size: 100px;
}


/* Pricing Page Styles */

.price {
  display: block;
  font-size: 50px;
  line-height: 50px;
}

.price sup {
  top: -20px;
  left: 2px;
  font-size: 20px;
}

.period {
  display: block;
  font-style: italic;
}


/* Footer Styles */

footer {
  margin: 50px 0;
}


/* Responsive Styles */

@media(max-width:991px) {
  .customer-img,
  .img-related {
    margin-bottom: 30px;
  }
}

@media(max-width:767px) {
  .img-portfolio {
    margin-bottom: 15px;
  }
  header.carousel .carousel {
    height: 60%!important;
  }
}
<!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">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Modern Business - Start Bootstrap Template</title>

  <!-- Bootstrap Core CSS -->
  <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Custom CSS -->
  <!--<link href="css/modern-business.css" rel="stylesheet">-->
  <link href="styles/modern-business.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <!--<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">-->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <!--<a class="navbar-brand" href="index.html">Super Service Heating &amp; Cooling</a>-->
        <!--<img src="images/logo-small.png">-->
        <!--<a class="navbar-brand" href="/"><img src="images/logo-small.png" class="logo"></a>-->
        <!--<a class="navbar-brand title" href="/">Super Service Heating &amp; Cooling</a>-->
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <!--<a href="about.html">About</a>-->
            <!--<a href="./about/">About</a>-->
            <!--<a href="#">Air Conditioning</a>-->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Air Conditioning <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Air Conditioning Repair</a>
              </li>
              <li>
                <a href="#">Air Conditioning Installation</a>
              </li>
            </ul>
          </li>
          <li>
            <!--<a href="services.html">Services</a>-->
            <!--<a href="#">Heating</a>-->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heating <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Heating Repair</a>
              </li>
              <li>
                <a href="#">Heating Installation</a>
              </li>
            </ul>
          </li>
          <li>
            <!--<a href="services.html">Services</a>-->
            <!--<a href="#">Heating</a>-->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ventilation <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Ventilation Repair</a>
              </li>
              <li>
                <a href="#">Ventilation Installation</a>
              </li>
            </ul>
          </li>
          <li>
            <!--<a href="services.html">Services</a>-->
            <!--<a href="#">Heating</a>-->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Maintenance <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Check-Up</a>
              </li>
              <li>
                <a href="#">Tune-Up</a>
              </li>
              <li>
                <a href="#">Re-Condition</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

  <!-- Header Carousel -->
  <header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>-->
        <div class="fill" style="background-image:url('https://static.wixstatic.com/media/fe503bcecec148e98b8264560b170aa9.jpg/v1/fill/w_1265,h_525,al_c,q_85,usm_0.66_1.00_0.01/fe503bcecec148e98b8264560b170aa9.jpg');"></div>
        <div class="carousel-caption">
          <!--<h2>Caption 1</h2>-->
          <h2>Heating</h2>
          <h2>Caption 1</h2>
        </div>
      </div>
      <div class="item">
        <!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>-->
        <div class="fill" style="background-image:url('https://static.wixstatic.com/media/7aa29e_fe789a02d347491da0897a536f102e31~mv2_d_2800_1867_s_2.jpg/v1/fill/w_1265,h_515,al_c,q_85,usm_0.66_1.00_0.01/7aa29e_fe789a02d347491da0897a536f102e31~mv2_d_2800_1867_s_2.jpg');"></div>
        <div class="carousel-caption">
          <h2>Air Conditioning</h2>
        </div>
      </div>
      <div class="item">
        <!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>-->
        <div class="fill" style="background-image:url('https://static.wixstatic.com/media/7aa29e_84f4f5aed8b241ec9a3b88b089f1313e~mv2_d_2800_1869_s_2.jpg/v1/fill/w_1265,h_527,al_c,q_85,usm_0.66_1.00_0.01/7aa29e_84f4f5aed8b241ec9a3b88b089f1313e~mv2_d_2800_1869_s_2.jpg');"></div>
        <div class="carousel-caption">
          <h2>Maintenance</h2>
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </header>

  <!-- Page Content -->
  <div class="container">

    <!-- Marketing Icons Section -->
    <div class="row">
      <div class="col-lg-12">

      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.3.7</h4>
          </div>
          <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
            <a href="#" class="btn btn-default">Learn More</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4><i class="fa fa-fw fa-gift"></i> Free &amp; Open Source</h4>
          </div>
          <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
            <a href="#" class="btn btn-default">Learn More</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4><i class="fa fa-fw fa-compass"></i> Easy to Use</h4>
          </div>
          <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
            <a href="#" class="btn btn-default">Learn More</a>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->

    <!-- Portfolio Section -->
    <div class="row">
      <div class="col-lg-12">
        <h2 class="page-header">Portfolio Heading</h2>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
        </a>
      </div>
    </div>
    <!-- /.row -->

    <!-- Features Section -->
    <div class="row">
      <div class="col-lg-12">
        <h2 class="page-header">Modern Business Features</h2>
      </div>
      <div class="col-md-6">
        <p>The Modern Business template by Start Bootstrap includes:</p>
        <ul>
          <li><strong>Bootstrap v3.3.7</strong>
          </li>
          <li>jQuery v1.11.1</li>
          <li>Font Awesome v4.2.0</li>
          <li>Working PHP contact form with validation</li>
          <li>Unstyled page elements for easy customization</li>
          <li>17 HTML pages</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.
        </p>
      </div>
      <div class="col-md-6">
        <img class="img-responsive" src="http://placehold.it/700x450" alt="">
      </div>
    </div>
    <!-- /.row -->

    <hr>

    <!-- Call to Action Section -->
    <div class="well">
      <div class="row">
        <div class="col-md-8">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
        </div>
        <div class="col-md-4">
          <a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a>
        </div>
      </div>
    </div>

    <hr>

    <!-- Footer -->
    <footer>
      <div class="row">
        <div class="col-lg-12">
          <p>Copyright &copy; Company Name
            <script>
              document.write(new Date().getFullYear())
            </script>
          </p>
        </div>
      </div>
    </footer>

  </div>
  <!-- /.container -->

  <!-- jQuery -->
  <!--<script src="js/jquery.js"></script>-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

  <!-- Bootstrap Core JavaScript -->
  <!--<script src="js/bootstrap.min.js"></script>-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <!-- Script to Activate the Carousel -->
  <script>
    $('.carousel').carousel({
      interval: 5000 //changes the speed
    })
  </script>

</body>

</html>

2 个答案:

答案 0 :(得分：1)

您的@media（最大宽度：767px）错误

@media(max-width:767px) {
  .img-portfolio {
    margin-bottom: 15px;
  }
  header.carousel .carousel { // header.carousel .fill is necessary
    height: 60%!important;
  }
}

我觉得这有帮助:)并注意：如果你调整高度，那么也要考虑宽

答案 1 :(得分：0)

尝试使用 vh 代替百分比。

height: 80vh;

我制作了这支笔，所以你可以看到如何使用vh单位：https://codepen.io/anon/pen/KqvxgE

vh - 根据您的视口计算高度，因此布局在不同的视口上看起来应该相同 - 屏幕分辨率。

有关css中单位的更多信息：https://www.w3schools.com/cssref/css_units.asp

相关问题
最新问题