Responsive - Pictures

example of what css 'cover' will do for you.

by Ben Clayton

HTML

This will only work when you have square images, otherwise you will be missing some of the picture
<div class='mframe'>
<div class='mitem'>
<div style="width:100%" class="-sys-dbnewpicture clickable">
    <img src="//www.feds-lzenergy-uk-flow.lrsdedicated.com/images/spacer.gif" style="width: 100%; height:auto; background-image: url(http://www.feds-lzenergy-uk-flow.lrsdedicated.com/dyn/_pictures/_ssi/footerssi/fastukdelivery.jpg);" class="-sys-dbnewpicture-img"  data-aspectratio="0.197916666666667" />
</div>
    </div>
    <div class='mitem'>
<div style="width:100%" class="-sys-dbnewpicture clickable">
    <img src="//www.feds-lzenergy-uk-flow.lrsdedicated.com/images/spacer.gif" style="width: 100%; height:auto; background-image: url(http://www.feds-lzenergy-uk-flow.lrsdedicated.com/dyn/_pictures/_ssi/footerssi/fastukdelivery.jpg);" class="-sys-dbnewpicture-img"  data-aspectratio="0.197916666666667" />
</div>
        </div>
</div>

CSS

.-sys-dbnewpicture img {
    background-size:cover;
    back
}
.mframe {}
.mitem {
    display:inline-block;
    width:45%;
}