Search code examples
htmlcsszurb-foundation-5

Make a picture cover the whole cell in foundation zurb


I am trying to make some picture fully cover the cells in a foundation zurb. I keep getting some margins in the cells. Is there a way to avoid this? The pictures are a little bit less in width than the cells' width.

  <div class="row">
    <div class="small-6 columns">
      <img src="pic1.png">
    </div>
    <div class="small-6 columns">
      <div class="row">
        <div class="small-12 columns">
          <img src="pic2.png" width="100%">
        </div>
        <div class="small-12 columns">
          <img src="assets/pic4.png">
        </div>
      </div>
    </div>
  </div>

Solution

  • You should set to your .column, .columns classes padding: 0.

    .column, .columns {
      padding: 0;
    }
    

    Or better to create new class padding-zero for example, and set this class to every image which you want make without paddings.