Intrinsic Ratio Div - hidden image hack V2

by audetwebdesign

HTML

<div class="ratio-wrapper">
    <img class="spacer" src="http://placehold.it/20x30">
    <div class="content">Some content...</div>
</div>

CSS

.ratio-wrapper {
    position: relative;
    display: inline-block;
    border: 1px solid gray;
    height: 500px; /* set the height or inherit from the parent container */
}
.ratio-wrapper .spacer {
    height: 100%; /* set height: 100% for portrait style content */
    visibility: hidden;
    vertical-align: top;
}
.ratio-wrapper .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
}