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

Question

[Alex]

Нужно чтобы изображение растягивалось на всю ширину контейнера, при этом высота подстраивалась автоматически, чтобы сохранить пропорции. Но если высота растянутого изображения превышает условные 500px то поведение менялось на противоположное: высота была максимальные 500px а ширина уменьшилась, чтобы сохранились пропорции.
Как сверстать?

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/DelphinPRO/kmb8s10a/

Как вам и нужно. IE/Edge в пролёте, да и фиг с ним.

Comments

[Ivan Bogachev]

Добавлю, что для IE можно это дело заполифилить, например с помощью object-fit-images.

Answer 2

[Froggyweb]

background-size: contain;