Calculate height of banner based on width - php

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

Change your banner size using CSS code:
#media only screen and (max-width: 480px) {
#your_baner_image_id {width:000px;height:000px;}
}
#media only screen and (min-width: 480px) and (max-width: 768px) {
#your_baner_image_id {width:000px;height:000px;}
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#your_baner_image_id {width:000px;height:000px;}
}
#media only screen and (min-width: 959px) {
#your_baner_image_id {width:000px;height:000px;}
}

Answer 2

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.)

Answer 3

Since you are using Jquery, you can get user Resolution by:
$(window).width();
$(window).height();
example:
$(function(){
var w = $(window).width();
$('your-banner').css('height',w*30%);//<--this will set banner height 30% of screen width
});