Вычислить высоту баннера по ширине

Question

У меня есть слайдер баннера, который я заставляю 100% ширину. Проблема в том, что когда он загружается, первый слайд не отображается (по крайней мере на хроме), мне нужно дождаться, когда второй слайд будет «скользить» ... тогда все будет толкаться и выглядеть так, как должно. Если я устанавливаю фиксированную высоту, он отлично работает, но мое разрешение - 1900, а экраны с разными разрешениями выглядят плохо с одним заблокированным по высоте.

Мне было интересно, есть ли способ, который я мог бы рассчитать разрешение посетителей и размеры баннера, чтобы определить соответствующую высоту, основанную на ширине 100% при загрузке.

Бета Ссылка http://www.can-do.org/beta/ (опять-таки, я думаю, что это хорошо работает с IE, я вижу только его в Chrome/Firefox)

Answer 1

Возможно, это возможно только с помощью CSS. Проблема с правилами @media заключается в том, что вам понадобится одна для каждой ширины пикселя, что не является жизнеспособным. Таким образом, вы могли бы попробовать это вместо:

Во-первых, изменить оболочку DIV здесь:

<div align="center"> 

к этому

<div class="pluswrap"> 

Затем добавьте эти стили в файл CSS:

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

Высота слайд-шоу всегда составляет 30% от ширины, поэтому нижняя прокладка 30% устанавливается так, чтобы контейнер был открыт до та t при любом размере экрана.

(Я не могу это правильно передать удаленно, но стоит попробовать. Это действительно сработало, но я не могу обновить страницу и посмотреть, что происходит при загрузке страницы, потому что временные стили стираются. Было бы интересно узнать, сработало ли это.)

Answer 2

Изменить свой размер баннера с помощью кода CSS:

@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 3

С вы используете Jquery, вы можете получить разрешение пользователя по:

$(window).width(); 
$(window).height(); 

пример:

$(function(){ 
    var w = $(window).width(); 
    $('your-banner').css('height',w*30%);//<--this will set banner height 30% of screen width 
});