Intrinsic Ratio Div - hidden image hack

by audetwebdesign

HTML

<div class="sq-wrapper">
    <img class="spacer" src="http://placehold.it/100x100">
    <div class="content">Some content...</div>
</div>

CSS

.sq-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    border: 1px solid gray;
}
.sq-wrapper .spacer {
    width: 100%;
    visibility: hidden;
    vertical-align: top;
}
.sq-wrapper .content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
}