Shrink to fit image panels with max width/height

by nikdtu

HTML

<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/500/500">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/800/200">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/200/800">
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <img src="http://www.placekitten.com/200/200">
    </div>
</div>

CSS

.box1 {
    width:auto;
    height: auto;
    max-width: 600px;
    max-height: 300px;
    background-color:chocolate;
    padding:5px;
    display: inline-block;
}
.box1 img {
    vertical-align: top;
    max-width: inherit;
    max-height: inherit;
}
.wrap {
    border: 1px dotted gray;
    margin: 1.00em 0;
    text-align: center;
}