CSS-размер: Размер

---

CSS-размеры

CSS поддерживает несколько единиц размера, включая пиксели (px), проценты (%), сантиметры (см), миллиметры (мм), дюймы (дюймы), 1/100 высоты или ширины области просмотра (vh, vw), а также размеры шрифта. Единицы измерения (эм, бэр, пт, пк).

Вы можете выбрать подходящее устройство в соответствии с вашими потребностями, например:

• px : абсолютная единица размера, фиксированная.
• em : Относительная единица размера относительно текущего размера шрифта элемента.
• rem : Относительная единица размера относительно размера шрифта корневого элемента.
• % : Относительная единица размера относительно процента родительского элемента.
• vw/vh : единицы просмотра, соответственно 1/100 ширины области просмотра и 1/100 высоты области просмотра.
• дюймы/см/мм : единицы фактического размера, дюймы, сантиметры и миллиметры соответственно.
• pt/pc : единицы размера шрифта, соответственно пункты и пики.

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

Пример

1. Установите высоту элемента

Вы можете использовать heightсвойства CSS, чтобы установить высоту элемента. Вот некоторые примеры:

1. Установите высоту элемента 200 пикселей:

.element {
    
    
  height: 200px;
}

2. Установите высоту элемента на 50% от высоты родительского элемента:

.element {
    
    
  height: 50%;
}

3. Установите высоту элемента на 50% от высоты области просмотра:

.element {
    
    
  height: 50vh;
}

4. Установите высоту элемента на 10em (относительная единица размера):

.element {
    
    
  height: 10em;
}

2. Используйте проценты, чтобы установить высоту изображения.

Вы можете использовать heightсвойства CSS, чтобы установить высоту изображения, и вы можете использовать проценты, чтобы указать высоту относительно его родительского элемента. Вот пример:

img {
    
    
  height: 50%;
}

В этом примере высота изображения будет установлена ​​на уровне 50 % от высоты его родительского элемента. Если высота родительского элемента составляет 400 пикселей, высота изображения будет 200 пикселей. Обратите внимание, что это может привести к тому, что изображение будет иметь непропорциональную ширину и высоту, поэтому вам может потребоваться использовать object-fitсвойства для управления адаптацией изображения.

3. Установите ширину элемента, используя значение пикселя.

Вы можете использовать widthсвойства CSS, чтобы установить ширину элемента, а также использовать значения пикселей, чтобы указать конкретную ширину. Вот пример:

.element {
    
    
  width: 200px;
}

В этом примере ширина элемента будет установлена ​​равной 200 пикселей. Обратите внимание, что это может привести к тому, что ширина и высота элемента будут непропорциональными, поэтому вам может потребоваться использовать heightатрибуты для управления высотой элемента.

4. Установите максимальную высоту элемента

Вы можете использовать max-heightсвойства CSS, чтобы установить максимальную высоту элемента. Вот пример:

.element {
    
    
  max-height: 200px;
}

В этом примере максимальная высота элемента будет установлена ​​равной 200 пикселей. Если содержимое элемента превышает эту высоту, появятся полосы прокрутки или содержимое будет обрезано. Обратите внимание, что это не влияет на ширину элемента, поэтому вам может потребоваться использовать widthсвойства для управления шириной элемента.

5. Используйте проценты, чтобы установить максимальную ширину элементов.

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

.element {
    
    
  max-width: 50%;
}

В этом примере максимальная ширина элемента будет установлена ​​равной 50% ширины его родительского элемента. Если содержимое элемента превышает эту ширину, появятся полосы прокрутки или содержимое будет обрезано. Обратите внимание, что это не влияет на высоту элемента, поэтому вам может потребоваться использовать heightсвойства для управления высотой элемента.

6. Установите минимальную высоту элемента

Вы можете использовать min-heightсвойства CSS, чтобы установить минимальную высоту элемента. Вот пример:

.element {
    
    
  min-height: 200px;
}

В этом примере минимальная высота элемента будет установлена ​​равной 200 пикселей. Если содержимое элемента меньше этой высоты, появится пустое пространство. Обратите внимание, что это не влияет на ширину элемента, поэтому вам может потребоваться использовать widthсвойства для управления шириной элемента.

7. Установите минимальную ширину элемента, используя значения пикселей.

Вы можете использовать min-widthсвойства CSS, чтобы установить минимальную ширину элемента, а также использовать значения пикселей, чтобы указать конкретную ширину. Вот пример:

.element {
    
    
  min-width: 200px;
}

В этом примере минимальная ширина элемента будет установлена ​​равной 200 пикселей. Если содержимое элемента меньше этой ширины, появится пустое пространство. Обратите внимание, что это не влияет на высоту элемента, поэтому вам может потребоваться использовать heightсвойства для управления высотой элемента.

Свойства размера CSS

Атрибуты	описывать
width	Установите ширину элемента. Значением может быть абсолютный размер (например, пиксели или точки), относительный размер (например, проценты) или размер содержимого (например, auto).
height	Установите высоту элемента. Значением может быть абсолютный размер, относительный размер или размер содержимого (например, auto).
max-width	Установите максимальную ширину элемента. Значение может быть абсолютным размером, относительным размером или фиксированным размером (например, none).
max-height	Установите максимальную высоту элемента. Значение может быть абсолютным размером, относительным размером или фиксированным размером (например, none).
min-width	Установите минимальную ширину элемента. Значение может быть абсолютным размером, относительным размером или фиксированным размером (например, auto).
min-height	Установите минимальную высоту элемента. Значение может быть абсолютным размером, относительным размером или фиксированным размером (например, auto).
box-sizing	Определяет, как рассчитываются ширина и высота элемента. Необязательные значения включают content-box(по умолчанию) и border-box.
aspect-ratio	Определяет соотношение сторон элемента. Значение представляет собой отношение ширины к высоте. Например, 16 / 9обозначает соотношение сторон 16:9.
object-fit	Определяет, как подогнать содержимое замещающего элемента по указанной высоте и ширине. Необязательные значения включают fill, contain, и .covernonescale-down
object-position	Определяет положение содержимого заменяемого элемента относительно его ограничивающей рамки. Вы можете использовать значения пикселей или ключевые слова позиции (например, center).