Bootstrap 3 fullPage plugin image-responsive are not working

Question

I use the JQuery plugin fullPage.js with Bootstrap 3.2 have some problem on Google Chrome.

For example :

I use the Bootstrap 3.2 img-responsive in fullPage demo page. Bootstrap 3.2 img-responsive are working , but it's mistake. the image will follow devices size and it should to auto change size. but it's not. please see the https://i.stack.imgur.com/wsSQN.jpg if I use only Bootstrap 3.2 ,then it is right.

anyone tell me how to fix the problem?

<div class="section" id="section4">
     <div class="slide">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 bg-content">
                    <div class="col-xs-6">
                        <img src="http://wpb.url.com.tw/sites/41/41da4d25b638fccb871bf8a00bf76187/attachments/Image/Jiu-Ban-.png?1413947626156" class="img-responsive img-rounded" style="width:100%; height:auto;">
                    </div>                        
                    <div class="col-xs-6">
                       test 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

fullPage.js won't resize your images. It doesn't say anywhere it will. You should be doing it with css3 media queries. — Alvaro, Dec 23 '14 at 17:01
I know. And I found that this problem is not cause by the use of the Bootstrap img-responsive , But rather I'm at the same time use Bootstrap table-responsive and img-response — Mike Liu, Dec 25 '14 at 03:57

score 1 · Answer 1 · edited May 23 '17 at 12:31

Use percentage rather than pixels and for position use responsive in css.

First of all, you have to check the facilities provided by Bootstrap, specifically the grid system and the responsive utilities.

Bootstrap 3.2.0 - CSS

Then, to perform a good responsive procedure, width and height should be both resizable, according to the current screen size.

Furthermore, you could find related questions on StackOverflow, just for instance:

Make Bootstrap Image responsive

score 0 · Answer 2 · answered Dec 22 '14 at 10:04

This should work

With this you can just style over the bootstrap and make your own fullpage slider

<div class="container">
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="carousel slide" id="carousel-858955">
            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#carousel-858955">
                </li>
                <li data-slide-to="1" data-target="#carousel-858955">
                </li>
                <li data-slide-to="2" data-target="#carousel-858955">
                </li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/1" />
                    <div class="carousel-caption">
                        <h4>
                            First Thumbnail label
                        </h4>
                        <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>
                    </div>
                </div>
                <div class="item">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/2" />
                    <div class="carousel-caption">
                        <h4>
                            Second Thumbnail label
                        </h4>
                        <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>
                    </div>
                </div>
                <div class="item">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/3" />
                    <div class="carousel-caption">
                        <h4>
                            Third Thumbnail label
                        </h4>
                        <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>
                    </div>
                </div>
            </div> <a class="left carousel-control" href="#carousel-858955" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-858955" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
    </div>
</div>

Bootstrap 3 fullPage plugin image-responsive are not working

2 Answers2