You can do it with a combination of max-height
, min-height
, white-space
and %
height. The only negative is that each image has to have a class set to determine if it is vertical or horizontal.
Example HTML:
<div>
<img src="http://placekitten.com/200/300" class="vert"/>
<img src="http://placekitten.com/500/200" class="horiz"/>
<img src="http://placekitten.com/200/300" class="vert"/>
<img src="http://placekitten.com/400/300" class="horiz"/>
<img src="http://placekitten.com/200/300" class="vert"/>
</div>
CSS:
body,html{
height: 100%;
}
div{
white-space: nowrap;
height: 100%;
}
img{
min-height: 200px;
height: 100%;
vertical-align: top;
}
.horiz{
max-height: 300px;
}
.vert{
max-height: 500px;
}