CODEWITHSUNDEEP
htmlimagetwitter-bootstraptwitter-bootstrap-3
Fearghal
Fearghal

Reputation: 11407

get image to respect the width of a screen using bootstrap

I'm using Bootstrap to build a responsive site however I cant seem to get an image to stay within the width of the screen, it just overflows. I use a well or a container and I get an ugly border with loads of wasted space. How can I get a picture, no border onto my page?

Here is my code that works with a container but the container has a border which I can't touch as I use containers elsewhere any i ant their borders.

<div class="row hidden-sm hidden-md hidden-lg">
    <div class="col-xs-12">
        <div class="container">
            <a href="#" class="thumbnail">
              <img src="img/home/image.png" alt="homePlate">
            </a>
        </div>
    </div>
</div>

Upvotes: 0

Views: 53

Answers (1)

DavidG
DavidG

Reputation: 118947

You just need to give you image the img-responsive class. This is defined in Bootstrap as:

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

So you image would be:

<img class="img-responsive" src="img/home/image.png" alt="homePlate">

Also, the border is likely coming from the thumbnail class you are applying to the a. Remove that and the border will go.

Upvotes: 1

Related Questions