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

Question

[Noffily]

Есть блок, с шириной 60% страницы и высотой 40% страницы. Стороны его разные.
Как пропорционально растянуть изображение до ширины или высоты блока?
Это решение не подходит:

max-width: 100%;
height:auto;

из-за того что изображение может быть меньше самого блока.
Заранее спасибо!

Comments

[Nikolay Talanov]

Самый простой вариант - вставлять картинку через background-image с параметром background-size: cover;

[Noffily]

Nikolay Talanov: изображения должны быть добавлены на страницу в DOM

Answer 1

[MhMadHamster]

jsfiddle.net/vrLkrtex

Comments

[Noffily]

Свойство отличное, жаль поддержка пока что плохая.

[MhMadHamster]

Noffily: ну про кроссбраузерность написано ничего не было, можете воспользоваться полифилом: https://github.com/anselmh/object-fit

Answer 2

[Михаил Ким]

можно сделать фоном блока изображение, и указать background-size: cover

Comments

[Noffily]

это тоже решение, но в данной ситуации не подходит, спасибо

[Антон Мисягин]

Мне тоже не подходит последний абзац

Answer 3

[alexgilev]

Используйте Backstretch и забудьте о боли )

Answer 4

[Aleksandr]

Сколько я не пытался найти это решение, так и не нашел. Если хочешь, чтобы изображение хорошо растягивалось, то только способом, который написал Nikolay Talanov.
Если вставлять изображения и писать max-width: 100%: height: auto, то при ресайзе окна, в портретная ориентация, изображение не заполняет 100% блока.