I have a row of divs that each contain one image. The image `height` is set to `100%` for each image and each `div` has a `padding-left` of `20px`, except for the last div which has no padding. Because the last div does not have padding and the `img` `width` is set to `100%`, the last image appears taller than the other images. I would like to fix this but I am not sure how. 

Here is a **[jsfiddle](http://jsfiddle.net/sknf7/)** that shows a visual representation of the problem. 

HTML : 

```
 <div class="grid">
        <div class="col-1-4">
            <img src="" />
        </div>
        <div class="col-1-4">
            <img src="" />
        </div>
        <div class="col-1-4">
            <img src="" />
        </div>
        <div class="col-1-4">
            <img src="" />
        </div>
    </div>

```

CSS :

```
 img {
        width: 100%;

    }

    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        margin: 0px;
    }

    [class*='col-'] {
        float: left;
        padding-right: 20px;
    }

    [class*='col-']:last-of-type {
        padding-right: 0px;
    }

    .grid {
        width: 100%;
        max-width: 940px;
        min-width: 755px;
        margin: 0 auto;
        overflow: hidden;
    }

    .grid:after {
        content: "";
        display: table;
        clear: both;
    }

    .col-1-4 {
        width: 25%;
    }

```