CODEWITHSUNDEEP
htmlcssimage-resizing
Fazlan Mohammed
Fazlan Mohammed

Reputation: 19

how to re-size image when responsive

I got this code from css-tricks.com but it doesn't seem to work properly. Can any one tell me how to use this.

<picture alt="description">
  <source src="small.jpg">
  <source src="medium.jpg" media="(min-width: 400px)">
  <source src="large.jpg" media="(min-width: 800px)">
</picture>

my code

<div class="col-sm-6 col-md-4">
    <picture alt="description">  
      <source src="images/office-room.jpg">  
      <source src="medium.jpg" media="(min-width: 400px)">  
      <source src="large.jpg" media="(min-width: 800px)">
  </picture>
</div>

Upvotes: 0

Views: 71

Answers (3)

Ivin Raj
Ivin Raj

Reputation: 3429

plz refer this one:

<style>
.fixed-ratio-resize { /* basic responsive img */
    max-width: 100%;
    height: auto;
    width: auto\9; /* IE8 */
}
</style>

<img class="fixed-ratio-resize" src="students.jpg" alt=""/>

DEMO

Upvotes: 1

Mathias
Mathias

Reputation: 207

looks like your using bootstrap with the col-sm-4 class

if so then you should just add this class to the image img-responsive

http://getbootstrap.com/css/#images

so

<div class="col-sm-6 col-md-4">
    <img class="img-responsive" src="images/office-room.jpg">  
</div>

Upvotes: 0

Sanjeev
Sanjeev

Reputation: 4375

You can also use srcset property to get away without using github picturefill

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

Upvotes: 0

Related Questions