Рассчитайте отзывчивый запас для чувствительного фиксированного изображения

Question

Я работаю над шаблоном, демонстрирующим статистику футболистов.

Слева находится изображение игрока. Он зафиксирован, а высота - 100% от окна. Его ширина увеличивается или уменьшается, когда вы уменьшаете высоту окна.

Справа вы должны найти статистику игроков и биографию. Все это вписывается в div .block-left. Ширина должна быть на 100% минус ширина игрового поля.

Теперь единственный способ продемонстрировать это - увеличить значение margin-left с тем же значением, что и ширина .picture.

Здесь кроется проблема. Ширина изображения всегда меняется в зависимости от разрешения экрана, поэтому должен быть левый край .block-content.

Я не могу найти практический способ сделать это. Может быть, jQuery?

Шаблон доступен здесь: http://bettercheckthekids.com/pirlo/index.html

Answer 1

Это не популярный дизайн, но да, вы можете сделать это с помощью JQuery окно изменения размера событие.

$(window).resize(function() { 
     var imgWidth = $(".picture img").width(); 
     $(".block-left").css("margin-left", imgWidth); 
});