Responsive Images, Video, iFrames and SVG

COS EVERYONE LOVES RWD.

by lovromar

HTML

<div class="svg-flex">
    <div class="svg-flex__inner">
        <div>
            <img src="http://baconmockup.com/1600/900" width="1600" height="900" />
        </div>
    </div>
    <div class="svg-flex__inner">
        <svg width="100%" height="100%" viewbox="0 0 1600 900">           
             <rect x="0" y="0" width="1600" height="900" rx="100" ry="100" fill="#ff0000" />
        </svg>
    </div>
</div>

CSS

.svg-flex {
    width: 100%;
}
.svg-flex__inner {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background:#000;
    width: 100%;
}
.svg-flex__inner img, .svg-flex__inner svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}