ブートストラップ：モバイルの背景画像のサイズ変更

@media（max-width）クエリを使用してブートストラップテンプレートを変更しています。背景画像は、デスクトップの応答性の高いビューでは正常に表示されます。しかし、画像は、以下のように、モバイル対応のビューのために水平（左と右）にカットされます。レスポンシブデザインモードやiPhoneで見た場合でも、デスクトップメディアクエリは引き続き使用されています。デスクトップとモバイルの両方のために使用されてブートストラップ：モバイルの背景画像のサイズ変更

デスクトップのメディアクエリーは

header.carousel { 
    height: 80%; 
}

である私は!importantでモバイルメディアクエリを変更しようとしたが、このメディアクエリの使用を強制的に表示されません。

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

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

私は携帯で正しくなります低い値にデスクトップのメディアクエリの高さを変更することができますが、その後のデスクトップビューは、垂直（上下）みじん切りれます。

誰でも解決策がありますか？

完全なコードは、VH代わりにパーセントを使用してみ

/*! 
 
* 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>

出典

2017-06-23 j7an

私はあなたのCSSとhtmlの詳細情報が必要です – jbiWeisendorf

@jbiWeisendorf私はレビューのための完全なコードを追加しました。 Thx – j7an

j7an：あなたのCSSにエラーがあります – jbiWeisendorf

未満です。あなたはVHユニットを使用する方法を見ることができるように

height: 80vh;

私は、このペンを作った：https://codepen.io/anon/pen/KqvxgE

VHは - あなたのビューポートに基づいて高さを計算し、そのレイアウトは異なるビューポート上で同じように見えるはずです - 画面解像度。 CSSのユニットについて

より：https://www.w3schools.com/cssref/css_units.asp

出典

2017-06-23 22:00:06

あなたの@media（最大幅：767px）

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

間違っている私は、このことができますだと思う:)と注意：あなたが調整した場合、高さはその後だと思いますまた幅広く

出典

2017-06-24 08:51:24 jbiWeisendorf

ブートストラップ：モバイルの背景画像のサイズ変更

答えて

関連する問題