Как заполнить блок картинкой без background?

Question

[Владимир Куликов]

Здравствуйте!

Есть к примеру квадратный блок: 500px на 500px и картинка: 300px на 100px.
У картинки будет width: 100% но нельзя использовать height: 100%.

Как растянуть картинку так, чтобы заполнить полностью блок?

p.s использовать background нельзя.

Вот небольшой пример)

Comments

[maxim]

Что за испытание? Зачем?)

[Владимир Куликов]

m1rvi, я обычно в таких случаях использую background. Но с ним вроде нельзя сделать ajax подгрузку картинок.

[maxim]

Владимир Куликов, ладно, тогда не трогаю)

Answer 1

[bingumd]

object-fit: cover;

Comments

[Владимир Куликов]

Попробовал задать тегу img и родителю, но не помогло)

[bingumd]

так сделайте:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;	
}

[Владимир Куликов]

bingumd, Спасибо, работает)