Как задать пропорциональное уменьшение такому блоку?

Для задания пропорционального уменьшения блоку в HTML можно использовать CSS свойства "width" и "max-width".

Свойство "width" задает фиксированную ширину элемента. Если вы хотите, чтобы блок имел определенную ширину и сохранялась пропорция при уменьшении окна браузера, вы можете задать значение "width" в процентах. Например, если вы хотите, чтобы блок занимал 50% ширины окна браузера, вы можете использовать следующий CSS код:

.block {
  width: 50%;
}

Однако, если задать фиксированную ширину, блок может выходить за пределы экрана и привести к горизонтальному скроллу при уменьшении размера окна браузера.

Чтобы избежать этой проблемы и задать пропорциональное уменьшение блоку, можно использовать свойство "max-width". Данное свойство устанавливает максимальную ширину элемента. Если окно браузера уменьшается и достигается заданная максимальная ширина, блок будет автоматически уменьшаться пропорционально.

Например, если вы хотите, чтобы блок занимал максимум 500 пикселей ширины и при уменьшении окна браузера пропорционально уменьшался, вы можете использовать следующий CSS код:

.block {
  max-width: 500px;
  width: 100%;
}

Таким образом, блок будет занимать всю ширину доступную внутри родительского контейнера, но не будет превышать ширину 500 пикселей, и будет автоматически уменьшаться пропорционально при уменьшении размера окна браузера.

Еще одним способом задать пропорциональное уменьшение блоку может быть использование относительных единиц измерения, таких как "em" или "rem". Например, вы можете задать ширину блока в "em" или "rem" таким образом:

.block {
  width: 50em;
}

В этом случае, ширина блока будет зависеть от размеров шрифта, установленных на элементах внутри блока.