Bootstrap, images inside carousel caption are not responsive

Question

I have created carousel with three slides, by using Bootstrap 3.

In carousel-inner where item is located i have added image tags. They work well, because they are images for slides and they rresize themselves by screen size.

Inside item there is carousel-caption I have added h1 tag with image tag inside of it. This image is not resizing it keeps itself always big.

I am missing something??

My code:

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


                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">

                    <div class="item active">
                        <img src="images/1.jpg" alt="img1">
                        <div class="carousel-caption">
                            <h1>
                                <img src="images/logo_medium.png">
                            </h1>
                            <h2>Hello</h2>
                            <p>
                                <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Сделать заказ</a>
                            </p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/2.jpg" alt="img2">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/3.jpg" alt="img3">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>

                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-main" 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-main" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>



            </div>
            <!-- /. Carousel -->

Please post your code here – Sunil Kumar May 08 '15 at 04:48 — Sunil Kumar, May 08 '15 at 04:48
`logo-meduim.png` is not resizing – Mr.D May 08 '15 at 05:03 — Mr.D, May 08 '15 at 05:03

score 0 · Answer 1 · answered May 08 '15 at 04:48

0

You should give Class to your Images like below :

<img **class="img-responsive"** src="img/show1.png" alt="" />

Css: img-responsive { max-width: 100%;}

answered May 08 '15 at 04:48

Vinayak

415
3
21

Check this link: http://stackoverflow.com/questions/21178012/how-to-make-bootstrap-carousel-image-responsive It will help you out – Vinayak May 08 '15 at 05:18

score 0 · Answer 2 · answered Oct 24 '21 at 15:37

0

you should give width/height directly to image like below :

<img width="as you define" height="as you define" src="img/show1.png" alt="" />

answered Oct 24 '21 at 15:37

Pratik wadikar

1
2

Bootstrap, images inside carousel caption are not responsive

2 Answers2