Create Responsive Image Carousel in Bootstrap

Question

Create Responsive Image Carousel in Bootstrap

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm trying to create a carousel of images with bootstrap and I'd like it to be responsive. I already managed to be part of this carousel, but I still have to understand the size of the images.

Below is my code:

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

WhenIputimageswith500pxheight,theproblemisthatittakesupalotofthescreeninbrowserswiththemaximizedwindow,butwhenitdecreasesthesizeofthewindowitisinanexcellentsize;

But I would like to put images with 200px height, but the problem is when I decrease the size of the window the height of the image gets very small.

How do I get the height of the image to be the size I want on smaller screens?

bootstrap-3 carousel

asked by anonymous 05.03.2016 / 03:44

2 answers

CSS font-smoothing: antialiasied makes no difference? Foreach Ajax for combo

score 1 · Answer 1

1

Set a minimum height for the image in CSS.

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

16.03.2016 / 14:58

score 0 · Answer 2

Change the class directly by resizing the pixels ... Probably so 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;
}