Question

我试图在我的网站上建立一个旋转木马，但我的图像高度不同。我在网上搜索，我很惊讶没有人使用＆＃34; img-responsive＆＃34;类，实际上不起作用，或者我没有正确使用它...

所以我的问题是;为什么＆＃34; img-responsive＆＃34;上课不正常？（P.S.我尝试修复旋转木马 - 内部类的最大高度，但图像没有正确调整大小）

这是我的代码，有人可以帮助我吗？

<div class="row">
    <div id="Carousel" class="carousel slide col-lg-12" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#Carousel" data-slide-to="0" class="active"></li>
            <li data-target="#Carousel" data-slide-to="1"></li>
            <li data-target="#Carousel" data-slide-to="2"></li>
            <li data-target="#Carousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner col-lg-12" role="listbox">
            <div class="item active">
                <img class="img-responsive" src="Images/Articles/Suisei_no_gargantia.jpg" alt="Suisei_no_gargantia">
                <div class="carousel-caption">
                    <h4>Header</h4>
                    <p>Sample text</p>
                </div>
            </div>

            <div class="item">
                <img class="img-responsive" src="Images/Articles/Pokemon.jpg" alt="Pokemon">
            </div>

            <div class="item">
                <img class="img-responsive" src="Images/Articles/Nisekoi.jpeg" alt="Nisekoi">
            </div>

            <div class="item">
                <img class="img-responsive" src="Images/Articles/High_School_Of_The_Dead.jpg" alt="High_School_Of_The_Dead">
            </div>
        </div>

     <!-- Left and right controls -->
        <a class="left carousel-control" href="#Carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#Carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 1

我前一段时间自己搜索了答案，发现没什么重要的。不知怎的，我得到了一些CSS，可以解决问题。

//Add following class in tag <div id="Carousel" class="carousel slide col-lg-12" data-ride="carousel">

.video-container{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 10px; height: 0; overflow:hidden;
}

.video-container div,
.video-container img,
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

它让我能够获得相同高度和响应性的图像。

Answer 2

我遇到了同样的问题，并且发现img-responsive类没有帮助，因为Bootstrap的旋转木马没有固定的高度。

建议删除img-responsive类。

我使用媒体查询为item div指定了确切的高度，并将以下CSS添加到img标记中，如下所示：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
#Carousel .carousel-inner .item {
    height:200px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
#Carousel .carousel-inner .item {
    height:300px;
} 
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
#Carousel .carousel-inner .item {
    height:400px;
}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#Carousel .carousel-inner .item {
    height:500px;
}
}

#Carousel .carousel-inner .item img {
max-height: 100%;  
max-width: 100%; 
position: absolute;  
top: 0;  
bottom: 0;  
left: 0;  
right: 0;  
margin: auto;
}

Bootstrap轮播高度

2 个答案: