旋转木马图像高度收缩

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;
}