Looking to create a horizontal list with image contents that adjust their size based on the height of the ul, which in turn is responsive to the container's height.
Take a look at this fiddle: http://jsfiddle.net/nLcrW/
#container{
display: block;
position: absolute;
top: 15%;
height: 70%;
background: cyan;
}
.HList{
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
}
.HList-Item{
display: inline-block;
height: 100%;
}
.HList img{
height: 100%;
}
When you try scaling the container window in the fiddle, you'll notice that the images overlap when scaled up and stretch when scaled down in Chrome and Firefox. Safari seems to handle it fine though.
Is there another way to address this issue or a workaround for these browsers?