CSS Height, Width and Max-width

CSS provides three properties for controlling the size of an element: height, width, and max-width.

The height property sets the height of an element, and the width property sets its width. Here’s an example of setting the height and width of an image to 200 pixels:

img {
  height: 200px;
  width: 200px;
}

In this example, the img element will have a height and width of 200 pixels. Note that if the original image is smaller than 200 pixels, it will be stretched to fit the size specified in the CSS.

The max-width property, on the other hand, sets the maximum width an element can have, while allowing its height to adjust automatically. This is useful for images and other elements that should maintain their aspect ratio and not stretch out of proportion. Here’s an example of setting the maximum width of an image to 100% of its container:

img {
  max-width: 100%;
  height: auto;
}

In this example, the img element will maintain its aspect ratio and not stretch out of proportion, while fitting within its parent element.

You can also use other units of measurement for setting the height and width of an element, such as em, rem, vw, and vh. The em and rem units are relative to the font-size of the element or the root element, respectively. The vw and vh units are relative to the viewport width and height, respectively. Here are some examples:

div {
  height: 2em; /* sets the height to twice the font-size of the element */
  width: 50%; /* sets the width to half the width of its parent element */
}

p {
  height: 10vw; /* sets the height to 10% of the viewport width */
  max-width: 80rem; /* sets the maximum width to 80 times the font-size of the root element */
}

It’s important to use the height, width, and max-width properties appropriately to ensure a visually pleasing and functional layout. In general, it’s best to avoid using fixed pixel sizes and use relative units of measurement that adjust automatically based on the size of the viewport and the content of the page.