diadiafiodor

Тут надо разобраться что такое 100% и вообще что такое %.
Проценты это относительная величина.
То есть, если у вас есть блок-родитель с фиксированной высотой, допустим 300px, то дочерний блок с свойством height 100% будет иметь величину 300px соответственно.

Но если у блокa с высотой 100% не будет ни 1ого родителя с фиксированной высотой, то по умолчанию, все эти блоки наследуют от html и body высоту auto, то есть не имеют никакую высоту, если нет контента.

Пример одного и того же блок с родителем с фиксированной высотой и без - https://codepen.io/you_web/pen/Zomvxa

Что бы сделать высоту 100% от размера экрана, достаточно задать 100vh (можете погуглить поточнее, но в общем это новые свойства, где 1vh - 1% высоты от экрана, 1vw - 1% ширина от экрана)
Так же, что бы эти свойства (vh и vw) корректно отображались на мобильных устройствах необходимо указать вьюпорт (тоже обязательно погуглите)

Повернуть его обратно, вычислить, а потом повернуть так, как надо.

Предложу свой вариант, без правки html, только на чистом css
https://codepen.io/aliencash/pen/MGoGXz?editors=1100

Вариант решения "в лоб", но что-то ничего лучше я не придумал: https://jsfiddle.net/t93zoorg/1/

На вкладке performance в chrome dev tools можно смотреть сколько времени выполняется конктретный кусок кода, на вкладке memory можно делать снапшоты, там так же будет статистика по каждому типу объекта

rgb - средний цвет изображения (или необходимого участка):

function getContrastLum(rgb) {
        var luminance = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
        return luminance < 110 ? 'f0f0f0' : '020202';
}