0
我目前在学习Bootstrap和关于网站响应能力。在我的网站中，我总共创建了8 <div>，其中4个包含图像，4个包含文本内容，每个包含文本内容的<div>都放置在包含图像的每个<div>之后。包含这些图像的类别名称为'sect'，即<div class="sect">。这个类的CSS如下：固定背景图片网站中的图片没有响应
.sect {
height: 100%;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
由于background-attachment: fixed图像0保持固定和其他分区的对他们的幻灯片。对于大于745像素的屏幕尺寸，图像的响应能力得以保持。在这个屏幕下面，图像没有更响应。我尝试了媒体查询来解决这个问题，但它仍然存在。
这里是我的示例网站的HTML代码：
.sub-sect {
height: auto;
padding: 20px;
}
html, body {
height: 100%;
padding-top: 0px;
}
@media (min-width: 745px) {
.sect {
height: 100%;
background-size: cover;
}
}
.sect {
height: 100%;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
.sectOne {
background-image: url('../Images/beautiful_garden_3-wallpaper-1920x1080.jpg');
}
.sectTwo {
background-image: url('../Images/burning_poker_joker-wallpaper-1920x1080.jpg');
}
.sectThree {
background-image: url('../Images/the_dark_knight_rises-wallpaper-1920x1080.jpg');
}
.sectFour {
background-image: url('../Images/lion_14-wallpaper-1366x768.jpg');
}
@media (max-width:450px) {
.sub-sect h2 {
font-size: 17px;
font-weight: 600;
}
.sub-sect p {
font-size: 13px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid transparent-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-nav" aria-expanded="false">
<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="#">Fixed Background</a>
</div>
<div class="collapse navbar-collapse" id="collapsed-nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about-us">About Us</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div class="sect sectOne"></div>
<div class="sub-sect" id="home">
<div class="container">
<div class="row"><div class="col-md-12"><h2>Home</h2></div></div>
<div class="row">
<div class="col-md-12 custom-para">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
<div class="sect sectTwo"></div>
<div class="sub-sect" id="services">
<div class="container">
<div class="row"><div class="col-md-12"><h2>Services</h2></div></div>
<div class="row">
<div class="col-md-12 custom-para">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
<div class="sect sectThree"></div>
<div class="sub-sect" id="about-us">
<div class="container">
<div class="row"><div class="col-md-12"><h2>About Us</h2></div></div>
<div class="row">
<div class="col-md-12 custom-para">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
<div class="sect sectFour"></div>
<div class="sub-sect" id="contact-us">
<div class="container">
<div class="row"><div class="col-md-12"><h2>Contact Us</h2></div></div>
<div class="row">
<div class="col-md-12 custom-para">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>所有这些HTML文档中链接的其他文件是从引导。如何使这些图像在745px的屏幕尺寸下响应，并避免裁剪图像的宽度。
对于所有的图像，图像分辨率都是相同的1920x1080。
任何人都可以请建议这个问题的解决方案？