CODEWITHSUNDEEP
htmlasp.netcsstwitter-bootstrap
nanobots
nanobots

Reputation: 457

Bootstrap resize webpage image goes out of column

I have three columns on my webpage. two images within the middle column. This is all done by bootstrap and when I resize the page (make it smaller) the image goes outside of the middle column. It is only when the images hit the edge of the web browser the image resize or relocates. Does anyone know why it is doing this? It is a asp.net web forms website. The master page already has 3 columns all set up and working I am simply putting the image inside the contend placeholder which is in the middle column.

this is the part of of code where I put in the image.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

  <div class="container">
    <div class="row">
         <div class="col-xs-12 col-sm-6 col-md-7">
            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="myCarousel" data-slide-to="1"></li>
                    <li data-target="myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/Ad1.jpg" class="img-responsive" />
                    </div>
                </div>
            </div>

        </div>
        <div class="col-xs-6 col-md-5">
            <div id="adRotator" class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/Ad2.jpg" class="img-responsive" />
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>Ad rotator</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 3

Views: 5622

Answers (1)

Raiyan
Raiyan

Reputation: 1687

Setting the width of the image to 100% in CSS helps in this situation. In your specific example, it can be resolved by:

.item img {
    width: 100%;
}

Upvotes: 7

Related Questions