Bootstrap：调整移动设备的背景图片大小
我正在修改使用@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;
}
}
我可以将桌面媒体查询高度更改为在移动设备上正确显示的较低值，但桌面视图将垂直切割（顶部和底部）。
任何人都有解决方案吗？
完整代码位于
之下
/*!
* 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 & 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 & 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 & 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 © 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
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？