CSS Size

quiz
Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!

Overview

In designing, size matters. The size of the elements plays a major role in capturing the attention of the user. For a web developer, it is important to understand how the different elements can be sized on the webpage. When it comes to styling the webpage you have to get your hands dirty with CSS. CSS is a wonderful technology that enables developers to create their websites according to their needs. In this article, we will cover ways how to size elements using CSS.

What is CSS size?

Size in CSS refers to how big or small different elements on the webpage will be displayed to the user. There are different ways by which the elements on the webpage can be sized. Before learning about how to style, we will first take a look at what are the two types of sizes that CSS has:

  1. Intrinsic Size - It is the original size of the elements that are set before any CSS is applied to them.
  2. Extrinsic Size - In this the elements are given some specific size by the user

Sizing Items in CSS

As we know, when we give some custom styles to our objects then it is referred to as extrinsic size. There are many different ways in which we can set the size of elements.

  • Height and Width As the name suggests these properties are used to set the Width and Height of the elements.

    • Values this support:
      • length - absolute value
      • percentage
      • auto - browser calculates the Height/Width
      • max-content - Intrinsic preferred height
      • min-content - Intrinsic minimum height
      • fit-content - Will use available space but never more than max-content

    Code Samples

    .box {
        border : 2px solid lightblue;
        height : 200px;
        /* height: 50%; */
        /* height:auto ; */
        /* height: max-content; */
        /* height: min-content; */
        /* height: fit-content; */
        width : 200px;
    }
    

    Output

    Output for fixed height and width example

  • Max Width CSS max-width is used to set the maximum width of an element. The max-width property also improves how the web browser handles small windows. The browser knows the maximum allowed width and if it encounters smaller width, then it automatically adjusts the element.

    • Values max-width support
      • length - absolute values
      • percentage
      • none
      • max-content
      • min-content
      • fit-content

    Code Sample

    .box{
        max-width: 500px;
        /* max-width: 50%; */
        /* max-width: none; */
        /* max-width: max-content; */
        /* max-width: min-content; */
        /* max-width: fit-content; */
        height: 100px;
        background-color: skyblue;
      }
    

    Output

    Output for max width

    Here, you can see that there is some space on the right after the text because the maximum width for the element was reached.

  • Natural or Intrinsic Size Intrinsic or the natural size is set before any CSS is applied. e.g. If you have placed an image on the webpage and you haven't changed its height or width then it will be displayed in its intrinsic size. Another example is that an empty div has no size of its own, it takes the size of the content that we put inside it, or the Height and Width that we set extrinsically.

    Code Sample

    .box {
      border: 1px solid red;
      background-color: skyblue;
    }
    
    

    Output

    Output for intrinsic size

    Here, we get only a div with a border of 1px (the first one), but if we give this div some height then only we will be able to view the sky blue color (the second one) because by default the div is empty.

  • CSS min- and max- sizes Mostly when placing elements on a website we are not sure how much space they will occupy, especially with the text boxes. So in that case we can use the CSS min- and max- properties to set a boundary that this specific element will take the minimum of this space and the maximum of this space. Here, is how the overflow in a textbox looks

    Overflow in text box
    Code for the above text element

    .box {
      border: 5px solid skyblue;
      height: 80px;
      width: 200px;
    }
    

    e.g. You can make a text box with a min-height of 200px, if you put more content inside the text box then, it will stretch to fit that content inside it. On the flip side, if you use the Height property then the text will overflow from the container because the container will not stretch to fit the text.

    Let's understand this better with an example. This is the same container but with min-height instead of height.

    Overflow in textbox with min height
    Code for this

    .box {
      border: 5px solid skyblue;
      min-height: 80px;
      width: 200px;
    }
    
    
    • Values
      • length - absolute values

      • percentage

      • none(only with width) - it means no limit on size of box

      • auto - browser will calculate

      • max-content

      • min-content

      • fit-content

    Code Sample

    .box {
      border: 5px solid skyblue;
      min-height: 80px;
      /* min-height: auto; */
      /* min-height: max-content; */
      /* min-height: min-content; */
      /* min-height: fit-content; */
      width: 200px;
      /* min-width: none; */
    }
    
    

    Output

    Output for min-max sizes

  • Setting a specific size Setting a specific size to elements is referred to as extrinsic size. We have seen various methods showing how we can set the size of elements. We can use the following methods to set the specific size to elements:

    • Using Height and Width properties
    • Using max-width and max-height

How to Set Image Height and Width in CSS?

The <img> tag in HTML allows us to set the height and width of the image so that the space required by the image is reserved when the page is loaded.

Here is an example,

<img src="scaler_logo.jpg" width="500" height="500">

Here the height and width of 500px are reserved for the image. But you can set the size of the image using CSS and CSS allows us to create responsive images too. These are the preferred ways:

  • Height and Width properties Height and Width can be specified to an image, but to make the image responsive we specify the width and set the height to auto. In this way, the image scales up and down depending on the size of the browser window.

    Code Sample

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

    Output

    Output for img height and width

    But there is one drawback here when the window is large but the image is small then the image is scaled up larger than its original size. To solve this issue we use the second method.

  • Using max-width property Here we set the max-width property to 100% so that the image is never scaled up larger than its original size.

    Code Sample

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

    Output

    output for image with auto height
    Now the image will scale down but it will not scale up above its maximum size.

How to Fit Elements with Respect to Screen Size in CSS?

Responsive design is a concept in web design that aims at creating a design that renders well on different types of devices with various screen sizes.

Here is an example of how the Scaler Website looks on different screen sizes.

Desktop

Desktop view
Tablet
Tablet view
Mobile
Mobile view

To achieve this, we can use media queries provided by CSS, which specify a boundary condition between which we can place our styles. CSS also has one other way which can help in creating a responsive design, these are called Viewport Units

The viewport is the visible area of the page in the browser. We have units:

  • vw - Viewport Width
  • vh - Viewport Height

We can use these units and can size elements relative to the viewport of the user. e.g. height : 1vh is equal to 1% height. Similarly, height : 1vw is equal to 1% width. Viewport units can be used with Text also!

When we use viewport units then the size of our elements changes when our viewport changes.

.box {
  border: 5px solid skyblue;
  width: 10vw;
  height: 10vh;
  font-size: 5vh;
}

Conclusion

  • Intrinsic size refers to the original size of the elements before applying any CSS
  • Extrinsic sizing means that the elements are given some specific size
  • Different ways to set the size of elements:
    • Height and Width
    • max-width
    • intrinsiz size
    • min- and max- sizes
  • Images can be made responsive by using Height, Width and max-width properties.
  • max-width allows the image to scale with the browser, but not more than its original size.
  • Viewport units vh and vw can be used to set the size according to the size of the viewport.
Challenge Time!
quiz
quiz
Time to test your skills and win rewards! Note: Rewards will be credited after the next product update.
Free Courses by top Scaler instructors
rcbGet a Free personalized Career Roadmap from