Vertical align fluid Image

Container with fix Height Image 100% width, vertical centered

by Dini Mer

HTML

<div class="vertical">
    <div>
        <div>
            <img src="http://skaos.ch/data/fiddle/vertical-align.jpg" alt="" />
        </div>
    </div> 
</div>

CSS

.vertical { height: 300px; overflow: hidden; background-color: #adf; }
.vertical > div { position: relative; top: 50%; width: 100%; height: 100%; }
/* Calculate Image Ratio => (height / width) * 100 => padding-top-value */
.vertical > div > div { position: relative; padding-top: 32.65%; width: 100%; }
.vertical > div > div > img { display: block; position: absolute; bottom: 50%; width: 100%; max-width: none; }