CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vishal Suri
Vishal Suri

Reputation: 455

How to keep image size correct in different resolutions, in Bootstrap?

I am working on a website, in which I need to create four columns of equal width. On top of columns, I need to place an image. Following is my code:

<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <div class="row" style="margin-bottom:30px;">
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/one.jpg" />
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">First column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/two.jpg" />
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Second column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/three.jpg" />
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Third column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/four.jpg" />
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Fourth column title</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-1"></div>
</div>

How can I place an image properly above column, image width equal to column width, without creating multiple size images?

Upvotes: 0

Views: 825

Answers (1)

Raja Tamil
Raja Tamil

Reputation: 71

Please find the code that works. I just added "img-responsive" class that is bootstrap in build class to all the image tags.

<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <div class="row" style="margin-bottom:30px;">
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/one.jpg" class="img-responsive"/>
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">First column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/two.jpg" class="img-responsive"/>
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Second column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/three.jpg" class="img-responsive"/>
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Third column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/four.jpg" class="img-responsive"/>
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Fourth column title</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-1"></div>
</div>

Upvotes: 2

Related Questions