Как высчитать пропорции изображения относительно соседнего блока?

Question

[Aison]

Ребят, в общем суть вопроса не совсем понятна в заголовке, и так:

есть два блока:

1. это постер фильма.
2. это скриншоты фильма.

мне нужно сделать следующие: менять высоту изображения постера относительно высоты блока с скиншотами, для этого я реализовал следующие

$(document).ready(function(){
    var h=$(".screenshots").outerHeight();
    $(".poster").css({"height":h});
});

работает, но беда в том, что нужно ещё сделать постер пропорциональным. например, сейчас у него такие размеры 128px по ширине и 178px по высоте. соответственно, если блок с скриншотами меняет высоту, то эта высота присваивается блоку с постером, например 178px меняется на 264px(как и у блока со скриншотами), но вот ширина постера никак не меняется, а должна изменится на 190px и в итоге должно выйти 190px ширины и 264px высоты.

сейчас


должно


знаю, что для этого нужно юзать формулу пропорций изображений, получается, нужно изначально получить размеры изображения, а потом уже вести расчёты по ним... не представляю как это реализовать, в js слаб(

линк на codepen

Comments

[Kovalsky]

А лэйаут-то какой? Как выглядит это всё? Если это связанные блоки, то можно и с помощью CSS обойтись

[Даниил Руднев]

Хочу скриншот этих двух блоков, не совсем понимаю сути

[Aison]

Kovalsky, Даниил Руднев, добавил скрины.

блоки отдельные. находятся в контейнере со свойством

display: flex;
    align-items: center;
    justify-content: center;

мб через calc сделать такое?

[Даниил Руднев]

Aison, А если обратиться к изображению и задать max-width: 100%

[Aison]

Даниил Руднев, изображение у меня через background

структура

<div class="flex">
  <div class="block-left"></div>
     <div class="poster" style="background-image: url(LINK)"></div>
  </div>
  <div class="block-right"></div>
     <div class="screenshots"><div 
  </div>
</div>

.block-left,
.block-right {
	padding: 20px;
}
.block-right {
	width: 100%;
}
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.screenshots {
    display: flex;
    flex-wrap: wrap;
}
.poster {
    width: 128px; height: 178px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

max-width: 100% не помогает, пробовал с <img class="poster" src="картинка"/>

[Aetae]

сделай jsfiddle

[RAX7]

Aison, не получится так сделать. У тебя высота постера зависит от ширины скриншотов, а ширина скриншотов зависит от ширины постера (которая в свою очередь зависит от его высоты).
Представь что ты сделал уже окно браузера, при этом скриншоты перескочат в следующую строку и весь блок с ними станет выше. Раз блок стал выше, то и постер должен стать выше и шире, раз постер стал шире, то под скрины остается меньше места и они опять перескакивают на новую строку...

[Aison]

Aetae, добавил линк в топик. чтобы js сработал, нужно обновить страницу.

[Aison]

RAX7, как бы Вы решили это?

[RAX7]

Aison, Честно хз, какого-то красивого решения для этой задачи я предложить не могу.
Можно сделать примерно такой алгоритм:
- задать минимальную (min) и максимальную (max) ширину постера
- дальше перебирать бинарным поиском до оптимальных размеров. Т.е. берем макс ширину постера, проверяем влезли ли скрины, если нет, то берем ширину min + (max - min) / 2 и опять проверяем. С учетом всех отступов между блоками считать всё это сплошной геморрой :(
Проще изменить дизайн. Сделать фикс. ширину постера, а не влезшие скриншоты скрывать и прикрутить кнопку "показать все" или сделать внутренний скрол/слайдер блоку.