轮播图像高度缩小

Posted 2023-03-06

【中文标题】轮播图像高度缩小

【英文标题】：Carousel Images Height Shrinking

【发布时间】：2012-12-27 19:46:09

【问题描述】：

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

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

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

这是我当前的代码：

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

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

【问题讨论】：

所以经过更多研究后，我自己修复了它。在 CSS 中，我有这个： .carousel-inner overflow:hidden;宽度：100%；位置：相对；我通过放置图像的尺寸而不是 100% 宽度来修复它，所以： .carousel-inner overflow:hidden;宽度：1920px；高度：1200px；位置：相对；

太棒了！您应该将其作为答案提交，并将问题标记为已回答。

【参考方案1】：

所以经过更多研究后，我自己修复了它。

在 CSS 中，我有这个：

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

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

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