Здравствуйте, есть задача увеличить изображение до заданных max-width или max-height сохранив пропорции. Например:
img {
display: block;
max-width: 400px;
max-height: 200px;
}
И дано изображение шириной 800 и высотой 100 пикселей, в итоге оно должно вписаться в ограничения и стать шириной 400 пикселей и высотой 50.
<img src="https://loremflickr.com/800/100">
Или дано изображение шириной 100 и высотой 150 пикселей, в итоге оно должно стать высотой 133 и шириной 200.
<img src="https://loremflickr.com/100/150">
В случае, когда размеры изображения больше max-width или max-height, оно масштабируется адекватно.
Пример реализации
Когда изображение не дотягивает, например, по размерам до ограничений, оно, естественно, не масштабируется, хотя это необходимо сделать.
Дописывание
width: 100%; height: auto; для img только ломает пропорции. Как всё это сделать верно?
