Create responsive image carousel in Bootstrap

Asked

Viewed 12,948 times

3

I’m trying to create an image carousel with bootstrap and I’d like it to be responsive. I’ve been able to be part of this carousel, but I still don’t understand the issue of image size.

Follow my code below:

<div id="meuSlider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#meuSlider" data-slide-to="0" class="active"></li>
        <li data-target="#meuSlider" data-slide-to="1"></li>
        <li data-target="#meuSlider" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active"><img src="img/c1.jpg" alt="Slider 1" /></div>
        <div class="item"><img src="img/c2.jpg" alt ="Slide 2" /></div>
        <div class="item"><img src="img/c3.jpg" alt="Slide 3" /></div>
    </div>
    <a class="left carousel-control" href="#meuSlider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#meuSlider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

inserir a descrição da imagem aqui

When I place images with height of 500px the problem is that it occupies much of the screen in browsers with maximized window, but when I decrease the size of the window becomes excellent size;

inserir a descrição da imagem aqui

But I would like to place images with height of 200px, only the problem is when I decrease the size of the window the height of the image becomes very small.

How to make the image height to be the size I want on smaller screens?

bootstrap-3 carousel

  • Welcome, Jorge. Your doubt is a bit confused. How about putting some images illustrating what you have and what you would like to have?

  • As quoted by @Pablo, this question is somewhat confusing, but I wonder if you have tried to solve it using the img-Responsive class of Bootstrap itself (http://getbootstrap.com/css/#images)? If this is not so it would be interesting to exemplify what you want.

  • sorry if I wasn’t very clear, I put pictures there to exemplify

2 answers

1

Directly change the class by resizing the pixels... Probably this way you can solve.

@media(max-width:767px) {
        .carousel-inner>.item>a>img, .carousel-inner>.item>img{
            width: 100%;
            height: 240px;
    }

@media(max-width:450px) {
        .carousel-inner>.item>a>img, .carousel-inner>.item>img{
            width: 100%;
            height: 269px;
}

@media(max-width:320px) {
        .carousel-inner>.item>a>img, .carousel-inner>.item>img{
            width: 100%;
            height: 240px;
}

1

Set a minimum height for the image in CSS.

.carousel-inner img {
    min-height: 200px;
}

Browser other questions tagged bootstrap-3 carousel

You are not signed in. Login or sign up in order to post.