Clever Geek Handbook

Zurb responsive image size not working

I am using zurb and I have 1 row and 4 columns and I have 4 images inside those 4 columns. The images are not the same size, so before getting 100% sharpness I have to give them a width and height for each.

I would like to ask which class do I need to use and how do I make my images responsive (attitude) while I reduce the size of my browser window and with that size of the columns that are responsive?

This is my code:

<div class="row">
   <div class="three columns">
      <img src="something.jpg" style="width:220px; height:200px;" />
   </div>
   <div class="three columns">
      <img src="something.jpg" style="width:223px; height:190px;" />
   </div>
   <div class="three columns">
      <img src="something.jpg" style="width:210px; height:150px;" />
   </div>
   <div class="three columns">
      <img src="something.jpg" style="width:210px; height:195px;" />
   </div>
</div>

I am not using inline CSS, this is just an example of width and height.

Thank.

+3


source to share


1 answer


I somehow commented this part inside .css:

/* line 45, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zurb-foundation-3.0.4/stylesheets/foundation/grid.scss */
img, object, embed {
  max-width: 100%;
  height: auto;
}


In doing so, my images react.

+3


source






More articles:


All Articles