Search the Community

Доброго времени суток, прошу помощи в решении задачи. Пример (как должно быть): На данном рисунке: Есть общий контейнер (зеленый прямоугольник), чьи размеры (и ширина и высота) заданы фиксированно (но эти величины заранее не известны + при изменении размеров окна браузера могут меняться) Внутри общего контейнера лежит контейнер изображения (красный прямоугольник). Ну и есть само изображение, о котором не известно вообще ничего. Суть задачи: изображение должно масштабироваться сохраняя свои пропорции так, чтобы занимать всю высоту или ширину зеленого контейнера (быть вписанным в зеленый контейнер), при этом красный контейнер должен иметь размеры в точности такие как само изображение (облегать его). Задача должна быть решена на чистом CSS + HTML. Доп информация: Эта информация имеет косвенное отношение к задаче, и я ее тут предоставил просто чтобы дать больше информации о контексте применения решения если оно найдется. Многое из того что тут описано я не включал в пример задачи чтобы не усложнять ее. Мои наработки: Пока что наиболее близкого поведения я смог добиться только таким способом: https://codepen.io/ows_nightwolf/pen/yxoYBa Но тут изображение не может вырасти больше своего реального размера, и красный контейнер не повторяет размеров изображения