Как правильно выставить размер изображения?

Question

[serg_marinkov]

На сайте med-centr.net/ есть мобильная версия, в которой есть баннер:

Этот баннер с мобильных устройств выглядит "сплющено". Изначальный размер фото 750x343. Это фото используется в мобильной версии и планшетной. С помощью CSS уменьшается размер до нужного.
Как сделать то бы этот баннер не был сплющенный? В фотошоп уменьшить может размер фото для мобильной версии и использовать это отдельное фото для мобильной версии?
Подскажите пожалуйста!

Comments

[Arman]

max-width: 100%; height: auto
не работает?

[serg_marinkov]

Arman, Работает, но не так как надо.Баннер по высоте становиться шире. А нужно что бы высота баннера не менялась. При этом что бы фото не было сплющено.

[RAX7]

serg_marinkov, так не получится, чтобы баннер не плющило его размеры должны меняться пропорционально. Т.е. если он стал в 2 раза шире, то и высота должна увеличиться в 2 раза. Единственный вариант сверстать этот блок, а не использовать картинку.

[IninsaY]

Возможно размер блока меньше чем размер баннера?

[serg_marinkov]

Размер блока баннера. Точнее для самого баннера задано:

.slide {
    width: 100%;
    height: 132px;
    margin-top: 23px;
}

А сам размер фото баннера 750x343
Но как сделать что бы было нормально средствами CSS?
Не использовать же для каждого размера экрана отдельное фото баннера.

[IninsaY]

serg_marinkov, что-то я запутался, вы хотите впихнуть в блок высотой 132 пикселя картинку высотой 343?