image - 轮播图像高度缩小

Question

我的索引页面上有一个轮播，但我注意到如果我缩小浏览器，图像不会留在整个轮播中。

如果你不明白我的意思，下面是缩小浏览器后的轮播图：

如您所见，图像的宽度会响应浏览器窗口的大小，但高度不会，因此会在图像下方留下很大的空白。

这是我当前的代码：

<div class='carousel slide' id='hero' style='position: absolute;'>
<div class='carousel-inner' style='z-index: -1'>
<div class='active item'>
    <img src='images/index/img1.jpg'>
</div>
<div class='item'>
    <img src='images/index/img2.jpg'>
</div>
<div class='item'>
    <img src='images/index/img3.jpg'>
</div>
<div class='item'>
    <img src='images/index/img4.jpg'>
</div>
<div class='item'>
    <img src='images/index/img5.jpg'>
</div>
<div class='item'>
    <img src='images/index/img6.jpg'>
</div>
</div>
</div>

如何使轮播中的图像响应较小的浏览器窗口？

Answer 1

因此，经过更多研究，我自己修复了它。

在 CSS 中，我有这个：

.carousel-inner {
    overflow:hidden;
    width:100%;
    position:relative;
}

我通过放置图像的尺寸而不是 100% 宽度来修复它，所以：

.carousel-inner {
    overflow:hidden;
    width:1920px;
    height:1200px;
    position:relative;
}