Question

I am constructing a horizontal scroll gallery that looks something like

<ul class='scroll'>
<li class='img'>
<img/>
</li>
</ul>
<li class...

The supporting CSS looks like:

.img {
float: left;
display: inline;
height:90%;
width:auto;
}

.scroll {
    display:block;
    max-height:800px; 
    height:100%
}

.img img {
    margin:5px 10px;
    float:left;
    max-height:100%;
    height:auto;
    width:auto;
}

At the moment it works great. On load the images resize and max out at 800px height. However what is really bugging me is when I resize a window to a smaller (or from smaller to larger) the li.img does not resize with the image, meaning you are left with either huge white borders or overlapping images.

If I select the image with INSPECT ELEMENT in chrome it all magically jumps into place.

I was wondering if there was a JQUERY solution that forces the browser to redraw the LI tag on resize (like opening Inspector does) or any other ways to lock the LI to the contained IMG width?

Answer 1

You could use

$(window).resize(function(){
  ...
});

and call a function which calculates the correct height.