Bootstrap Carousel图像正在以相同的高度压扁。它们没有正确缩放。我已经搜索并尝试了几种解决方案，但是，他们还没有解决我的问题。这是我的HTML。
我尝试添加添加到几个不同的CSS文件的链接。我还尝试添加几个链接到不同的js文件。我试图将高度从500px更改为auto。我尝试将最小宽度100％更改为宽度100％。
我正在使用Bootstrap 3.0，但大多数解决方案都是指早期版本。提到3.0的解决方案不起作用。我刚开始学习BS。我对html和css有很好的工作知识。我相信这与js有关，但我无法弄清楚我的具体问题。提前感谢您的帮助。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="mywebsite.com, Web and Media." />
<meta name="keywords" content="web design, web development, media, talent, marketing, " />
<meta name="robots" content="index,follow" />
<meta name="GOOGLEBOT" content="INDEX, FOLLOW" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blackhock | Web & Media</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<!-- Custom styles for this template -->
<link href="css/style-custom.css" rel="stylesheet">
<!-- 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]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'analytics#']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1">
<!-- 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="/">My website</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><a href="/"><span class="glyphicon glyphicon-home"></span></a></span></li>
<li><a href="#free-quote">Get a Free Quote!</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Info<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Web</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Entrepreneurs</a></li>
<li><a href="#">Portfolio</a></li>
<li class="divider"></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/slider1.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Web • Media</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#free-quote" role="button">Get A Free Quote!</a></p>
</div>
</div>
</div>
<div class="item">
<img src="images/slider1.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Web</h1>
<p>Website Design & Development, Responsive Layouts, Search Engine Optimization...</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="images/slider1.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Media</h1>
<p>Graphic Design, Logos, Web Banners...</p>
<p><a class="btn btn-lg btn-warning" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="images/slider1.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Entrepreneurs</h1>
<p>Make your dreams a reality!</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
<!--
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
-->
</div>
<!-- /.carousel -->
<hr class="layout">
<!-- Marketing messaging
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<h2 class="text-center line-divider">My website</h2>
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<img src="images/pc.png" width="140" height="140" alt="pc image">
<h2 id="free-quote">Web</h2>
<p>Website Design & Development, Responsive Layouts, Search Engine Optimization...</p>
<p><a class="btn btn-primary" href="#" role="button">More Info »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4 col-md-4 col-sm-4">
<img class="img-circle" src="images/media.jpg" width="140" height="140" alt="media image">
<h2>Media</h2>
<p>Graphic Design, Logos, Web Banners...</p>
<p><a class="btn btn-warning" href="#" role="button">More Info »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4 col-md-4 col-sm-4">
<img class="img-circle" src="images/entrepreneurs.jpg" width="140" height="140" alt="entrepreneurs image">
<h2>Entrepreneurs</h2>
<p>Do you have an idea that will change the world? It all starts with the first step. We can help make your dreams a reality!</p>
<p><a class="btn btn-success" href="#" role="button">More Info »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer>
<div class="container">
©2014 My Website™ All Rights Reserved
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-dropdown.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
这是我添加的自定义css。
.carousel {
margin-bottom: 0;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color:#000;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}