当我将宽度和高度更改为小于100%的任何值时,它会抛弃整个代码并切断图像。我真的希望它只是不占用太多空间的中心。
我已将所有图像调整为大约。 500x500或500x660,以免拉伸图像太多。如果我在代码中更改高度和宽度,如果我从旋转木马更改为某种类型的画廊或卡片,它会全部抛弃?我只是希望它在中间而不是整个页面。
<style>
body {font-family: Arial, Helvetica, sans-serif; margin: auto;}
.carousel-inner img{width: 100%; height: 100%; margin-top: 100px; margin-bottom: 100px}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<span class="navbar-brand mb-1 h1">Home</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="./index.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Contact Us!</a>
</li>
</ul>
</div>
</nav>
<p><br /><br /></p>
<!--gallery-->
<div class="container">
<div id="blah" class="carousel slide" data-ride="carousel">
<!--indicators-->
<ul class="carousel-indicators">
<li data-target="#blah" data-slide-to="0" class="active"></li>
<li data-target="#blah" data-slide-to="1"></li>
<li data-target="#blah" data-slide-to="2"></li>
<li data-target="#blah" data-slide-to="3"></li>
<li data-target="#blah" data-slide-to="4"></li>
<li data-target="#blah" data-slide-to="5"></li>
<li data-target="#blah" data-slide-to="6"></li>
<li data-target="#blah" data-slide-to="7"></li>
<li data-target="#blah" data-slide-to="8"></li>
<li data-target="#blah" data-slide-to="9"></li>
<li data-target="#blah" data-slide-to="10"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imgs/1handle.jpg" alt="crystal handle">
</div>
<div class="carousel-item">
<img src="imgs/4rods.jpg" alt="a group of rods by me" >
</div>
<div class="carousel-item">
<img src="imgs/blackcollage.jpg" alt="black rod" >
</div>
<div class="carousel-item">
<img src="imgs/bluecollage.jpg" alt="royal blue rod">
</div>
<div class="carousel-item">
<img src="imgs/greencollage.jpg" alt="green rod" >
</div>
<div class="carousel-item">
<img src="imgs/redcollage.jpg" alt="red rod" >
</div>
<div class="carousel-item">
<img src="imgs/shinybluecoll.jpg" alt="metallic blue rod">
</div>
<div class="carousel-item">
<img src="imgs/whiteredcoll.jpg" alt="white and red rod">
</div>
<div class="carousel-item">
<img src="imgs/handles.jpg" alt="assorted handles">
</div>
<div class="carousel-item">
<img src="imgs/customer.jpg" alt="happy customer testing the waters">
</div>
</div>
<!--controls/arrows-->
<a class="carousel-control-prev" href="#blah" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#blah" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
尝试给图像一个width: 100%; height: auto;
它会自动缩放图像。接下来调整你的carousal高度和宽度。