Vertical image resizing

by sambaldwin

HTML

<header>
</header>
<div id="container">
    <div class="slide">
        <img src="http://placehold.it/800x700"/>
    </div> 
</div>

CSS

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

header {
    height:10em;
    background:#46a;
}

#container {
    background:#1df;
    height:100%;
    padding-bottom:10em;
}

img {
    display:block;
    max-width:100%;
    height:auto;
    max-height:100%;
}