Как в данном коде формируется высота блока?

Question

[ymfront]

Встретил в проекте изображение со следующими стилями:

<img class="image" src="image.jpg">

.image{
	display: block;
	width: 100%;
	min-width: 1920px;
	height: calc((100vh - 656px) / 2 + 330px);
	min-height: 330px;
	object-fit: cover;
	object-position: top;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

Не могу понять, как формируется значение height и min-height.

Причем после сборки данная формула заменяется на такую:

.image{
	height: calc(50vh + 2px);
        min-height: 330px;
}

Определил, что 656px - это минимальная высота блока .wrapper (обертка всего контента). Он может быть или выше, или 656px, не меньше.

Откуда берутся значения height и min-height?

Answer 1

[Сергей delphinpro]

Вот честное слово, когда вижу такие вопросы хочется ругаться матом.
Скажите, пожалуйста, вы учились в средней школе, или после детского садика сюда пришли?

Имеем выражение: (100vh - 656px) / 2 + 330px =
Раскроем скобки:     100vh / 2 - 656px / 2 + 330px = 
Выполним деление:    50vh - 328px + 330px
Сложим коэффициенты: -328px + 330px = 2px
собираем воедино:    50vh + 2px

Это что касается формулы.

В остальном совсем все просто. Сначала вычислится высота (50vh + 2px), и если она окажется менее, чем 330px, то станет равной трёмстам тридцати пикселям.