html, css Вписать любое изображение в окне по ширине и высоте с пропорциями. Изображения имеют разные соотношения сторон
Надо вписать изображение в окно сохраняя пропорции. Фотография может быть разных размеров 1000х200 или 333х1280. В основном есть информация как вписать по ширине, но если попадается "высокая" фотография тогда она увеличивается в размере до своего максимума или до ширины.
Надо вписать 100% любое изображение в окно.
Эффект должен быть такой, как если на компе открыть с помощью браузера фотографию.
Ответы (2 шт):
Автор решения: surpri6e
→ Ссылка
Вашу проблему можно легко решить, если использовать данное свойство со значением: contain или scale-down. Эти значения мало чем различаются, но попробовать и посмотреть что лучше, все таки стоит. Свойство следует применять напрямую к img или video.
object-fit: contain;
или
object-fit: scale-down
Автор решения: Андрей
→ Ссылка
Получилось вот таким способом. пример
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: contain;
}
</style>
</head>
<body>
<img src="1.jpg" />
</body>
</html>