mask-size

/* Keywords syntax */
mask-size: cover;
mask-size: contain;

/* One-value syntax */
/* the width of the image (height set to 'auto') */
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto auto;

/* Multiple values */
/* Do not confuse this with mask-size: auto auto */
mask-size: auto, auto;
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;

/* Global values */
mask-size: inherit;
mask-size: initial;
mask-size: revert;
mask-size: revert-layer;
mask-size: unset;

Одно или несколько <bg-size> значений, разделённых запятыми.

Значение <bg-size> может быть задано тремя способами:

• используя ключевое слово contain
• используя ключевое слово cover
• используя значения ширины и высоты

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

• Если задано только одно значение, оно устанавливает ширину, а высота устанавливается в auto.
• Если задано два значения, первое устанавливает ширину, а второе — высоту.

Каждое значение может быть <length>, <percentage>, или auto.

<length>

Значение <length> масштабирует изображение маски до указанной длины в соответствующем измерении. Отрицательные длины запрещены.

<percentage>

Значение <percentage> масштабирует изображение маски в соответствующем измерении до указанного процента области позиционирования маски, которая определяется значением mask-origin. Область позиционирования маски по умолчанию — область, содержащая контент блока и его отступы; область также может быть изменена на только контент или на область, содержащую границы, отступы и контент. Отрицательные проценты запрещены.

auto

Ключевое слово, которое масштабирует изображение маски в соответствующих направлениях для сохранения его исходного соотношения сторон.

contain

Ключевое слово, которое масштабирует изображение настолько, насколько это возможно, и сохраняет его соотношение сторон. Изображение вписывается в контейнер. Изображение автоматически центрируется, если не переопределено другим свойством, таким как mask-position.

cover

Ключевое слово, обратное contain. Масштабирует изображение настолько, насколько это возможно, и сохраняет его соотношение сторон. Изображение «покрывает» всю ширину или высоту контейнера. Если размеры изображения и контейнера отличаются, изображение обрезается слева/справа или сверху/снизу.

Интерпретация возможных значений зависит от исходных размеров изображения (ширины и высоты) и исходного соотношения сторон (отношение ширины к высоте). Растровое изображение всегда имеет исходные размеры и исходное соотношение сторон. Векторное изображение может иметь как исходные размеры, так и, следовательно, исходное соотношение сторон. Оно также может иметь один или ни одного исходного размера, и в любом случае оно может или не может иметь исходное соотношение сторон. Градиенты рассматриваются как изображения без исходных размеров или исходного соотношения сторон.

Размер изображения маски, которое отображается, вычисляется следующим образом:

Если оба компонента mask-size указаны и не являются auto:

Изображение маски отображается в указанном размере.

Если mask-size является contain или cover:

Изображение отображается, сохраняя исходное соотношение сторон в максимально возможном размере, содержащемся в или покрывающим область позиционирования маски. Если у изображения нет исходного соотношения сторон, то оно отображается в размерах области позиционирования маски.

Если mask-size является auto или auto auto:

Если у изображения есть оба исходных размера, оно отображается в этих размерах. Если у него нет исходных размеров и исходного соотношения сторон, оно отображается в размерах области позиционирования маски. Если у него нет размеров, но есть соотношение сторон, оно отображается так, как будто было указано contain. Если у изображения есть один исходный размер и соотношение сторон, оно отображается в размере, определяемом этим одним размером и соотношением сторон. Если у изображения есть один исходный размер, но нет соотношения сторон, оно отображается с использованием исходного размера и соответствующего размера области позиционирования маски.

Если mask-size имеет один auto компонент и один не-auto компонент:

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

mask-size = 
  <bg-size>#  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<length-percentage> = 
  <length>      |
  <percentage>  

• Обрезка и маскирование в CSS