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

Question

[pegas]

jsfiddle.net/x98peaqy/1
Есть 2 контейнера. В одном изображение с размерами 321 x 157. Оно хорошо адаптируется со свойством object-fit: contain;
Помогите сделать аналогичное поведение для блока. Т.е. нужно чтобы красный блок вёл себя абсолютно так-же как и картинка в соседнем контейнере. Для этого вроде нужна функция вычислений соотношений пропорций.

Answer 1

[Aleksey Solovyev]

.ch {
  background: red;
  position: relative;
  padding-top: 48%;/* или через calc -  157 / 321 * 100 */
  top: 50%;
  transform: translatey(-50%);
}

jsfiddle.net/x98peaqy/2

Comments

[pegas]

Если .ex1 поставить
.ex1 {
border: 5px black solid;
width: 200px;
height: 50px;
float: left;
}

Всё сломается

[Aleksey Solovyev]

Хм... эт уже дополнительное условие... наверно, только через JS тогда. По крайней мере. других идей пока нет в голове...

update: на css такую задачу решить нельзя. Так как у вас может быть два варианта:

1. Высота > ширины
   
2. Ширина > высоты
   

для каждого будет своя формула расчета, а для чистого css еще не придумали условные операторы. Ответ выше работает, если только нужно выполнить 1 условие. Остается только JS

[pegas]

Aleksey Solovyev, Мне хотя бы на JS решить

[Aleksey Solovyev]

ну пусть будет так jsfiddle.net/x98peaqy/5

[Aleksey Solovyev]

Если размеры контейнеров будут всегда одинаковы, то упрощаем логику
jsfiddle.net/x98peaqy/6

Логику можно посмотреть в исходниках https://github.com/bfred-it/object-fit-images

ps ну и теперь можно любую(любое соотношение) картинку туда пихать jsfiddle.net/x98peaqy/7

[pegas]

Aleksey Solovyev, Очень хорошее решение, но боюсь тут надо не к размерам изображения привязываться, а вычесть какой-то алгоритм object-fit: contain, вот такого поведения которое сейчас у картинки при респонсе jsfiddle.net/x98peaqy/9 нужно добиться для блока. Боюсь тут без формулы мы мало чего сделаем... Ключевой момент в адаптации

[pegas]

Aleksey Solovyev, Извиняюсь, повнимательней вник в Ваш код) jsfiddle.net/x98peaqy/10

[Aleksey Solovyev]

Артём, работает? Странно... На самом деле, если у картинки будет соотношение сторон больше 1(ширина картинки меньше высоты), то код не будет работать корректно. Надо добавить еще 1 условие:

if (aspect < 1) {
  // landscape format
} else {
   // portrait format
}

И к портретному добавить по аналогии с первым(только знак поменять в формуле)

ps ну и вынести все в функцию, а то дублировать код как-то буэээ
psps и у Вас в примере можно if if заменить на if else