CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
darkhorse
darkhorse

Reputation: 8722

How to make an image responsive using bootstrap without having it take up the entire width of the division?

Anyone who has used twitter bootstrap knows that an image can be made responsive using the img-responsive class in the html img tag. However, these images take up 100% of the width of the division.

How can I make the image responsive while still keeping its original width?

Upvotes: 16

Views: 84521

Answers (3)

Henrique M.
Henrique M.

Reputation: 502

You should have a wrapper around the image defining the actual size of the parent that could be used to place that image. It will be related to the parent div. Then apply .img-responsive to the image. This will cause the image to have the same width as the wrapper.

HTML

<div class="wrapper">
   <img src="your-image.jpg" class="img-responsive" />
</div>

CSS

.wrapper {
   width: 50%;
}

If you want to keep the original size (it will be resized to have small size but never higher), you should also add a max-width which will have to correspond to the image's original size. This will overwrite the original value of 100%

.wrapper img {
    max-width: 280px;
}

Upvotes: 3

Meenakshi
Meenakshi

Reputation: 175

The .img-responsive class applies max-width: 100%; and height: auto; to the image, so if you want to keep its original width explicitly you have to set width of image using width attribute of img tag.

Upvotes: 2

Rvervuurt
Rvervuurt

Reputation: 8963

You can put the image in a wrapper and give the wrapper the width you want the image to have. HTML

<div class="imgwrapper">
   <img src="img.jpg" class="img-responsive">
</div>

CSS

.imgwrapper {
   width: 80%;
}

The above should in theory make the imgwrapper 80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.

If this doesn't answer your question, could you explain a bit better what you mean with keep original width, but make it responsive? Since making it responsive will resize the image, which means it will not have the original width.

Upvotes: 23

Related Questions