CSS Dimension: Dimension

---

CSS dimensions

CSS supports multiple size units, including pixels (px), percentages (%), centimeters (cm), millimeters (mm), inches (in), 1/100 of the viewport height or width (vh, vw), and font sizes Units (em, rem, pt, pc).

You can choose the appropriate unit according to your needs, such as:

• px : absolute size unit, fixed.
• em : Relative size unit, relative to the current element font size.
• rem : Relative size unit, relative to the root element font size.
• % : Relative size unit, relative to the percentage of the parent element.
• vw/vh : Viewport units, respectively 1/100 of the viewport width and 1/100 of the viewport height.
• in/cm/mm : actual size units, inches, centimeters, and millimeters respectively.
• pt/pc : Font size units, respectively points and picas.

When setting the width, height, overflow and other attributes of an element, you can select the above size units for control.

Example

1. Set the height of the element

You can use CSS heightproperties to set the height of an element. Here are some examples:

1. Set the height of the element to 200 pixels:

.element {
    
    
  height: 200px;
}

2. Set the height of the element to 50% of the height of the parent element:

.element {
    
    
  height: 50%;
}

3. Set the height of the element to 50% of the viewport height:

.element {
    
    
  height: 50vh;
}

4. Set the height of the element to 10em (relative size unit):

.element {
    
    
  height: 10em;
}

2. Use percentage to set image height

You can use heightproperties of CSS to set the height of an image, and you can use percentages to specify the height relative to its parent element. Here is an example:

img {
    
    
  height: 50%;
}

In this example, the image's height will be set to 50% of the height of its parent element. If the parent element's height is 400 pixels, the image's height will be 200 pixels. Note that this may result in the image having a disproportionate width and height, so you may need to use object-fitproperties to control how the image adapts.

3. Set element width using pixel value

You can use CSS widthproperties to set the width of an element, and you can use pixel values ​​to specify a specific width. Here is an example:

.element {
    
    
  width: 200px;
}

In this example, the width of the element will be set to 200 pixels. Note that this may cause the element's width and height to be disproportionate, so you may need to use heightattributes to control the element's height.

4. Set the maximum height of the element

You can use CSS max-heightproperties to set the maximum height of an element. Here is an example:

.element {
    
    
  max-height: 200px;
}

In this example, the maximum height of the element will be set to 200 pixels. If the element's content exceeds this height, scroll bars will appear or the content will be clipped. Note that this does not affect the width of the element, so you may need to use widthproperties to control the width of the element.

5. Use percentages to set the maximum width of elements

You can use CSS max-widthproperties to set the maximum width of an element, and you can use percentages to specify the width relative to its parent element. Here is an example:

.element {
    
    
  max-width: 50%;
}

In this example, the element's maximum width will be set to 50% of the width of its parent element. If the element's content exceeds this width, scroll bars will appear or the content will be clipped. Note that this does not affect the height of the element, so you may need to use heightproperties to control the height of the element.

6. Set the minimum height of the element

You can use CSS min-heightproperties to set the minimum height of an element. Here is an example:

.element {
    
    
  min-height: 200px;
}

In this example, the element's minimum height will be set to 200 pixels. If the element's content is less than this height, empty space will appear. Note that this does not affect the width of the element, so you may need to use widthproperties to control the width of the element.

7. Set the minimum width of an element using pixel values

You can use CSS min-widthproperties to set the minimum width of an element, and you can use pixel values ​​to specify a specific width. Here is an example:

.element {
    
    
  min-width: 200px;
}

In this example, the element's minimum width will be set to 200 pixels. If the element's content is smaller than this width, empty space will appear. Note that this does not affect the height of the element, so you may need to use heightproperties to control the height of the element.

CSS size properties

Attributes	describe
width	Set the width of the element. The value can be an absolute size (such as pixels or points), a relative size (such as a percentage), or the size of the content (for example, auto).
height	Set the height of the element. The value can be an absolute size, a relative size, or the size of the content (for example, auto).
max-width	Set the maximum width of the element. The value can be an absolute size, a relative size, or a fixed size (for example, none).
max-height	Set the maximum height of the element. The value can be an absolute size, a relative size, or a fixed size (for example, none).
min-width	Set the minimum width of the element. The value can be an absolute size, a relative size, or a fixed size (for example, auto).
min-height	Set the minimum height of the element. The value can be an absolute size, a relative size, or a fixed size (for example, auto).
box-sizing	Determines how the element's width and height are calculated. Optional values ​​include content-box(default) and border-box.
aspect-ratio	Determines the element's aspect ratio. The value is the ratio of width divided by height. For example, 16 / 9indicates an aspect ratio of 16:9.
object-fit	Determines how to fit the replacement element's content to its specified height and width. Optional values ​​include fill, contain, cover, noneand scale-down.
object-position	Determines the position of the replaced element's content relative to its bounding box. You can use pixel values ​​or position keywords (such as center).