我在使用Bootstrap v4 图片轮播时遇到了一些问题。当我缩小浏览器宽度时,图片的高度保持不变,但是图片的宽度变小,导致图片在高度上被拉伸得很严重。
我已经查看了Stack Overflow上的类似帖子,并尝试了评论中提到的所有方法,但仍然无法解决问题。因此,我决定在这里发布一个新的帖子来求助。
这是一个codepen链接:https://codepen.io/anon/pen/owNyyx,但是如果您不想访问codepen,我也将代码粘贴在下面。
我已经查看了Stack Overflow上的类似帖子,并尝试了评论中提到的所有方法,但仍然无法解决问题。因此,我决定在这里发布一个新的帖子来求助。
这是一个codepen链接:https://codepen.io/anon/pen/owNyyx,但是如果您不想访问codepen,我也将代码粘贴在下面。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="images/image1.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random Title for image1</h3>
<p>Random description1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/image2.png" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random title for image2</h3>
<p>Random description2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/image3.png" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random title for image3</h3>
<p>Random description3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>