我目前正在学习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图片<div>仍然固定，另一个div滑过它们。对于屏幕尺寸＆gt;保持图像的响应性。 745px。在此屏幕下方，图像不再响应。我已经尝试过媒体查询来解决这个问题，但它仍然存在。
以下是我的示例网站的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文档中链接的所有其他文件均来自Bootstrap。如何使这些图像在745px屏幕尺寸以下响应，并避免裁剪图像的宽度。
所有图像的图像分辨率均为1920x1080。
有人可以为这个问题提出解决方案吗？
答案 0 :(得分：0)
处理自适应图像有时会令人生畏，而且你正在经历艰难的道路。最好的方法之一是将图像的宽度设置为max-width: 100%或width: 100%。这样，图像将分别拉伸到容器内的最大宽度，或者无论如何都将填充容器的宽度。更多此here
通过将宽度设置为100％，宽度将随页面宽度的变化自动更改，从而使其响应。对于高度，您必须添加height: auto，以便根据宽度进行更改。
Bootstrap通过提供“img-responsive”类来简化这一过程。
.img-responsive类应用display：block;和最大宽度：100％;和身高：汽车;到图像
这适用于所有屏幕尺寸。如果您有响应式图像的主要问题之一，即容器的高度不同，那么只需使用MatchHeight.js
注意：除非您特别希望屏幕阅读器不考虑图片并妨碍您网站的辅助功能，否则您应将图片添加为<img> HTML元素而不是使用css background