CODEWITHSUNDEEP
htmlcsstwitter-bootstrapangular-ui-bootstrap
JVM
JVM

Reputation: 994

Bootstrap xs class is not resizing .thumbnail images correctly when screen becomes too small

I am new to Bootstrap, was going through w3schools lessons. I was trying following example: W3Schools Tryit Editor

This example does not seem to work when I change the class from class="col-md-4" to class="col-xs-4" for all divs. All the images are losing their aspect ratios when I am resizing the browser to minimum width.

I think this behavior is not correct and images should resize and stack.

Please help me understand this behavior.

Upvotes: 0

Views: 780

Answers (2)

Steve K
Steve K

Reputation: 9055

This has nothing to do with the col-md or col-xs classes it has to do with that the images are wrapped in a thumbnail. 

<div class="col-md-4">
  <a href="pulpitrock.jpg" class="thumbnail">
    <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>    
    <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
  </a>
</div>

As you can see the <a> tag in this code above has the class of thumbnail. If you remove this class the images will overflow the div. In bootstraps css they have a max-width of 100% for all images in a thumbnail or thumnbnail <a>. If you want them to be responsive you should give them a class and a width in percentages and don't specify height or give height of auto and not use inline styles. If you want to remove the max-width you need to set this to have a max-width of none like this but this will cause the image to overflow the div.

.thumbnail > a img, .thumbnail > img{
  max-width: none;
}

Here is a fiddle Fiddle

Upvotes: 0

Mandeep Maan
Mandeep Maan

Reputation: 11

You just have to remove inline css from the <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px"> and replace it with

<img class="img-responsive" src="pulpitrock.jpg" alt="Pulpit Rock">

and if you want to add different sizes for thumbnail add one more class in your .css file, don't use inline.

Upvotes: 1

Related Questions