当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Bootstrap Carousel: images not behaving responsively?

问题描述:

Firstly, I am aware of this post however trying the prescribed solution doesn't seem to work for me. My image appears to no extend in proportion to the viewport of the slider.

I included a screenshot below...

The grey portion in the slide is the default background; Apparently my image is being nudged to the top, but not expanded the full height, which is 500px.

This is my HTML:

 <!-- Carousel

================================================== -->

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- 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 class="carousel-inner">

<div class="item active">

<img class="img-responsive" width="100%" height:"500px" src="/img/4a_slider_w992.png" data-src="/img/4a_slider_w992.png" alt="First slide">

<div class="container">

<div class="carousel-caption">

<h1>Another example headline.</h1>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>

</div>

</div>

</div>

<!-- repeated -->

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

</div><!-- /.carousel -->

And this is my css...

/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */

/* Carousel base class */

.carousel {

margin-bottom: 20px;

border-bottom: 1px solid #3f2416;

z-index: 1000;

margin-top:-50px !important;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

z-index: 10;

top: 50px;

}

/* Declare heights because of positioning of img element */

.carousel .item {

height: 500px; //needed

background-color: #777;

width:100%;

}

Of course this is the CSS which the post I referred to said to comment out...

// .carousel-inner > .item > img { /*<== as per stackOverFlow*/

// top: 0;

// left: 0;

// min-width: 100%;

// height: 500px;

// }

网友答案:

Try setting the height of the image to cover its parent and letting it scale proportionally by removing the max-width

.carousel-inner>.item>img, 
.carousel-inner>.item>a>img{
    height: 100%;
    width: auto;
    max-width: none;
    margin: 0 auto;
}

Demo fiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: