Fixed ratio css resize using data:uri method

Method by Jasper Palfree http://wellcaffeinated.net

by reggi

HTML

<div class="outer">
    <img class="scaling-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
</div>

CSS

.scaling-img {
    position: relative;
    visibility: hidden;
    width: 100%;
    min-width: 100%;
}

.outer {
    margin:10px;
    max-height:340px;
    max-width:340px;
    position: relative;
    outline: 1px solid grey;
}