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。
任何人都可以請建議這個問題的解決方案？