Как задать размеры картинки, чтобы она не выезжала за край браузера?

Question

[Ingernirated]

Всем привет!
Есть блок, кладу в него картинку.
Блок - прямоугольник вдоль.
Картинке в нём задаю высоту 100%, а ширину auto.
И всё хорошо, но, когда я начинаю сужать браузер и ширина блока становится меньше высоты, то картинка так же сохраняет свои размеры по высоте 100% и ширина уже ее вылазит за границы блока и растягивает браузер показывая в нём уже прокрутку понизу.
Как заставить подстраиваться под любые соотношения сторон не растягивая себя за границы?

Comments

[Мария Попова]

Высота картинки должна под высоту блока подстраиваться?

[Ingernirated]

Мария Попова, под самую меньшую из сторон

[Мария Попова]

тогда 100% ширина, высота auto

Answer 1

[Ankhena]

https://jsfiddle.net/wn7Lsmgr/
Центрирование или позиционирование сами доделайте. Для IE полифил.
Но я бы переделала на bg.

Comments

[Ingernirated]

спасибо!

Answer 2

[Иван Иванов]

Попробуй поменять width:100% и height:auto; Просто наверно картинка пытается сохранить пропорции? Если не получится, используй вместо картинки div с background.

Comments

[Ingernirated]

В этом и проблема, что мне нужно подстраивать по меньшую из сторон, а так выходит под одну тоже.