Пропорции изображения при изменении размера окна браузера

[senty]

На сайте skazka18.ru есть слайдшоу, оно сделано с помощую указания картинки в:

<div class="slider-img" style="background:url(/assets/templates/main/img/img-puziri.jpg) no-repeat center top;"> 

благодаря этому картинка при изменении ширины окна браузера остается по центру и остается с необходимыми прпорциями (высота не меняется, ценрирование по центру, картинка не сужается).

Вероятно будет правильней сделать картинку с помощью

<img src=""/>

и размещать ее внутри

<div>

и не использовать

style="background:url(...) no-repeat center top;"

.

Но что бы я не пытался использовать (задавал ширину 100%, высоту 500 пх, задавал явные размеры картинки) требуемый результат не достигался.

Прошу помощи советом как добиться результата с использованием

<img src=""/>

аналогично результату

<div class="slider-img" style="background:url(/assets/templates/main/img/img-puziri.jpg) no-repeat center top;"> 

[Daiver]

Если задать только высоту картинки без ширины, то все картинки будут подгоняться пропорционально под высоту.

[senty]

Если задать только высоту картинки без ширины, то все картинки будут подгоняться пропорционально под высоту.

Сделал 2ой слайд как вы предлагаете, результат - картинка выравнивается по правому краю, края картинки при изменении размеров экрана не обрезаются, как на первом слайде.

[USF]

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

[senty]

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

В этом случае картинка меняет высоту. Если указать явную высоту, а ширину оставить как вы предложили, то она сужается. Можете посмотреть 2ой слайд. Результат нужен как на первом слайде.

[USF]

В этом случае картинка меняет высоту

ну да, она пропорционально уменьшается.

а вам как нужно, не пойму?

[senty]

В этом случае картинка меняет высоту

ну да, она пропорционально уменьшается.

а вам как нужно, не пойму?

Как в первом слайде.

[Daiver]

Я почти нашла решение на эту проблему, только нужна небольшая помощь других форумчан. Как выставить картинку, которая шире экрана так, чтобы по горизонтали она стояла по центру?

P.S. Уже не надо. Ответ в следующем сообщении.

Edited September 20, 2012 by Daiver

[Daiver]

В файле поменять этот код:

<div class="item">
<img src="/assets/templates/main/img/img-puziri.jpg" height="500" style="max-width: 100%; height: 500;" />
</div>

на этот:

<div class="item" style="background:url(http://www.skazka18.ru/assets/templates/main/img/img-puziri.jpg) no-repeat center top;">
</div>

А в этом файле добавить в класс

.carousel .item 

вот этот код:

margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height:500px

и все будет работать как надо.

P.S. И не надо заморачиваться по поводу img, если и без нее все работает.

P.P.S. Каруселька в опере и ИЕ лагает. И надо бы надпись "Заказать Шоу мыльный пузырей" заменить на "Заказать Шоу Мыльных пузырей"

[senty]

Вы прикалываетесь?

На первом слайде работает все отлично и искал именно решение для img, а не background для div.

Спасибо конечно