CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Hikaru Shindo
Hikaru Shindo

Reputation: 2913

img-responsive in Bootstrap does not work

according to http://getbootstrap.com/css/#images-responsive, I want to make my image to support a responsive website by using 

<img src="..." class="img-responsive" alt="Responsive image">

But it is not working.

Here is my code,

<body>
    <img class="img-responsive" src="images/myImage.png" />
</body>

The original image size is 284x191

When I open a browser on 1920*1080 screen size, the image size is 284x191. But when I open a browser on 1280*720 screen size, the image size is still the same.

I don't know what I did wrong to reduce the image size dynamically. Thanks for help.

Upvotes: 6

Views: 15743

Answers (7)

Gitau Harrison
Gitau Harrison

Reputation: 3517

It is important to know what version of bootstrap you are using. This is because the technique used to make images responsive keeps on changing from version to version.

I tried <img class="img-responsive" src="<your-URL>"> and <img class="img-fluid" src="<your-URL>" but none of it worked for me.

For Bootstrap V4.5, use:

<img src="my-URL" class="img-fluid" style="max-width: 100%; height: auto;">

Modify <img class="img-fluid" src="<your-URL>" to include styles, then it will work. The reason for this is so that it scales with the parent element.

You can read the Bootstrap documentation on images to learn more.

Upvotes: 1

Samadhi Sri Udara Wijenayake
Samadhi Sri Udara Wijenayake

Reputation: 133

use class="img-fluid" for bootstrap 4 version

Upvotes: 0

Michael
Michael

Reputation: 5048

In Bootstrap 4 the syntax is class="img-fluid"

Upvotes: 9

Rahul Makhija
Rahul Makhija

Reputation: 609

I had the same issue.

I realized that I was using bootstrap 4 (and not 3).

Changing it back to bootstrap 3 fixed it for me.

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362360

img-responsive makes the max-width:100% If you want the image to be full width (even though it's actually much smaller than the width of a typical screen), you need to force it to be width:100%...

http://codeply.com/go/fDNOBhaQPS

Upvotes: 4

Hardik Gondalia
Hardik Gondalia

Reputation: 3717

You need to wrap your Img tag with any bootstrap class. As I did as div with col-lg-4 class.

<div class="col-lg-4">
    <img class="img-responsive" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />
</div>

or 

<img class="img-responsive col-lg-4" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />

If you not wrapped with div tag

Link : http://codepen.io/anon/pen/MygbNO

Upvotes: 1

Gopalakrishnan
Gopalakrishnan

Reputation: 957

All you need is width:100% . Using col-xs-12:

<img class='img-responsive col-xs-12' />

Or

<img class='img-responsive' style='width:100%;' />

Try this code

Upvotes: 5

Related Questions