1PeGaS
@1PeGaS

Как сделать соотношение сторон для блока?

jsfiddle.net/x98peaqy/1
Есть 2 контейнера. В одном изображение с размерами 321 x 157. Оно хорошо адаптируется со свойством object-fit: contain;
Помогите сделать аналогичное поведение для блока. Т.е. нужно чтобы красный блок вёл себя абсолютно так-же как и картинка в соседнем контейнере. Для этого вроде нужна функция вычислений соотношений пропорций.
  • Вопрос задан
  • 263 просмотра
Решения вопроса 1
alsolovyev
@alsolovyev
.ch {
  background: red;
  position: relative;
  padding-top: 48%;/* или через calc -  157 / 321 * 100 */
  top: 50%;
  transform: translatey(-50%);
}


jsfiddle.net/x98peaqy/2
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы