Carousel Bootstrap: Change Size

Asked

Viewed 13,362 times

2

I’m trying to add my images, which have 700 x 400 dimensions, to the bootstrap Carousel. And I wanted Carousel to have exactly those dimensions, too. However, when I try to do this, the image decreases to 280 x 400, as in the image below, and the Carousel goes to 700 x 400, as desired.

inserir a descrição da imagem aqui

My HTML:

<section id="sliderhome">
    <div id="meuSlider" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-1.png" alt="Imagem 1">
                </div>
            </div>
            <div class="item">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-2.png" alt="Imagem 2">
                </div>
            </div>
            <div class="item">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-3.png" alt="Imagem 3">
                </div>
            </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>
</section>

My CSS:

@media(min-width: 1024px) {
    .div-img-carousel, .item.active {
        overflow: hidden;
        width: 700px;
        height: 400px;
        margin: 0 auto;
    }

    .carousel-inner {
        width: 40%;
    }

    #meuSlider {
        width: 700px;
        height: 400px;
    }

}

How do I leave the image the size of the Carousel?

Thank you!

html5 css3 bootstrap-3

3 answers

1


Have you looked at JS??? There is a Js file from Carousel that you define some attributes.. gives a check if that’s not it..

Another thing put the other attributes of the css of Carousel does not help you define only in the class of the image the size, if the other div has a smaller size.. Do a trigger-only test, put the image size attributes on the image tag itself to see if it changes.. if not change is pq has another class that is setting and controlling the total size of your Carousel.

  • Hello Paulinha, the only attributes I declared for Carousel was in the same css posted, the others are from the bootstrap itself. And I’ve also done the other attempts as you requested, but it didn’t work.

  • Hi Raphael, locate the active item class, Carousel-Inner and id Meuslide.. put their settings.. If you don’t have it in your main css create these classes and put the settings you want and see if it accepts.. or create a new type class with the width you want and declare after Carousel slider. I’m half-acting now but I’ll see if I can do it here for you and post the code later.

  • I did the editing. I had forgotten to put the '.Carousel-Inner', and added also #meuSlider and the .item.active, but the result is the same as the image above. :(

  • Good as I can’t make your code now try two things

  • First: put after widht values and height as ! Import if you tried and still did not work there on . Carousel-Inner put 100% or auto ve se right.. but try the first option first.

  • Now it worked!! Thank you very much Paulinha!

Show 1 more comment

-1

Do it the way it works.

<img style="height: 400px; width: 700px;" .....

-3

and only use class="w-100...-75...-30"

  • 1

    Could you clarify better for the author why you believe this will solve the problem? Or show with a Fiddle?

Browser other questions tagged html5 css3 bootstrap-3

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