<分区>
<分区>
目前，我正在使用 Bootstrap 模板中开箱即用的旋转木马，效果很好，但是，当我添加图像并调整浏览器窗口大小时，它不会保持图像纵横比...而是会挤压图像横向。
现在我已经尝试了很多变体来在调整窗口大小时保持图像纵横比，下面的代码是我得到的最接近的代码。话虽如此，这段代码确实保持了宽高比，但是当窗口调整为手机尺寸时，图像高度基本上是 50px，你无法分辨图像是什么。
我想要的是当您调整浏览器大小时轮播的行为与本网站上的轮播一样:http://teekay.com/
我当前的代码: 轮播:
<!-- carousel-->
<div id="myCarousel" data-ride="carousel" class="carousel slide">
<!-- 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>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active"><img src="../images/carousel_resize_3.jpg" alt="First slide" class="img-responsive"/>
<div class="container">
<div class="carousel-caption">
<h1>text1</h1>
<p></p>
<p><a href="/login" role="button" class="btn btn-lg btn-warning">Sign up today</a></p>
</div>
</div>
</div>
<div class="item"><img src="../images/carousel_resize_1.jpg" alt="Second slide" class="second-slide"/>
<div class="container">
<div class="carousel-caption">
<h1>text2</h1>
<p></p>
<p><a href="#moreInfo" role="button" class="btn btn-lg btn-warning">Learn more</a></p>
</div>
</div>
</div>
<div class="item"><img src="../images/carousel_resize_2.jpg" alt="Third slide" class="third-slide"/>
<div class="container">
<div class="carousel-caption">
<h1>text3</h1>
<p></p>
<p><a href="#appInfo" role="button" class="btn btn-lg btn-warning">Browse jobs</a></p>
</div>
</div>
</div>
</div><a href="#myCarousel" role="button" data-slide="prev" class="left carousel-control"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a><a href="#myCarousel" role="button" data-slide="next" class="right carousel-control"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
</div>
<!-- /.carousel-->
我的 CSS:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
/*height: 500px;*/
margin-bottom: 60px;
}
/* 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: #777;
}
/*.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}*/
我已经尝试了很多 Stack Overflow 帖子中的答案，但我似乎无法让旋转木马缩小同时保持纵横比。我错过了什么？
感谢您的帮助!
我设法通过以下代码让它保持宽高比，但是现在调整浏览器大小时轮播整体上并没有变小，有什么想法可以做到这一点吗？
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* 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: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 500px;
}
img {
height: 500px;
width: 1920px;
/*object-fit: contain;*/
object-fit: cover;
}
最佳答案
轮播图片在最新的 Bootstrap 3 中默认是响应式的 { display: block;最大宽度:100%；高度:自动； }。因此，无需向图像添加 .img-responsive 类。 (另外，不需要将 .carousel-caption 包装在 .container 中)
如果您从示例标记开始 here并删除额外的样式覆盖，您可以看到宽高比在不同的屏幕尺寸上得到了适当的保持。您可以使用上面的相同链接验证这一点。
关于javascript - 如何使 Bootstrap Carousel 保持图像纵横比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37041534/
相关文章：
javascript - 在 Javascript 对象上调用 jQuery 函数的惯用方法是什么？
javascript - 是否可以在一个 javascript 文件中声明一个变量并在另一个文件中使用它？
javascript - 按下按钮时动态创建的 iframe 在所有浏览器上立即消失
css - Internet Explorer 错误解释 html 标签
javascript - 显示 iframe 源而不是内容本身
html - 显示 block 没有将我的标签元素对齐在我的输入元素之上？