根据宽度计算横幅的高度

Question

I have a banner slider that I am forcing 100% width. The problem is that when it loads, the first slide does not show (on chrome at least), I have to wait for the second slide to 'slide' in..then everything pushes down and looks as it should. If I set a fixed height it works fine, but my resolution is 1900 and different resolution screens would look bad with one locked in height.

I was wondering if there is a way I could calculate the visitors resolution and the banner dimensions to figure out the appropriate height based on the 100% width on load.

The beta url is http://www.can-do.org/beta/ (again, I think it works ok with IE, I only see it in Chrome/firefox)

Answer 1

It might be possible to do this with CSS alone. The problem with @media rules is that you'd need one for each pixel width, which isn't viable. So you could try this instead:

Firstly, change the wrapper div here:

<div align="center">

to this

<div class="pluswrap">

Then, add these styles to your CSS file:

.pluswrap {
text-align: center;
padding-bottom: 30%;
height: 0;
position: relative;
}

The slideshow height is always 30% of the width, so the 30% bottom padding is set to keep the container div open to that dimension at any screen size.

(I can't really text this properly remotely, but it's worth a try. It did seem to work, but I can't refresh the page and see what happen on page load, because the temporary styles get wiped. Would be keen to know if it worked, though.)