Css Max Width

What is Max Width in CSS?

The max-width property is used to make the width of an element the max value of the width.

This feature is mostly used to give responsive designs, especially when images, text or containers didn’t have to cause any addition of larger width than normal.

Basic Usage:

This example sets the maximum width of an image to 300 pixels. If the original image width is greater than 300 pixels, it will be scaled down to fit.

                          
                            img {
                                max-width: 300px; /* Set the maximum width of the image to 300 pixels */
                            }

Responsive Image with Max Width:

This example makes an image responsive by setting its maximum width to 100% of its containing element. The height is set to auto to maintain the aspect ratio.

                          
                            img {
                                max-width: 100%;
                                height: auto; /* Maintain the aspect ratio while resizing based on the container's width */
                            }

Max Width for a Container:

This sets the maximum width for a container, and the margin: 0 auto; centers the container on the page.

                          
                            .container {
                                max-width: 600px; /* Set the maximum width of a container to 600 pixels */
                                margin: 0 auto; /* Center the container on the page */
                            }

Responsive Text with Max Width:

This example limits a paragraph's width to 500 pixels and centers it on the page.

                          
                            p {
                                max-width: 500px; /* Set the maximum width for a paragraph to 500 pixels */
                                margin: 0 auto; /* Center the paragraph on the page */
                            }

Max Width with Flexbox:

This example sets the maximum width for a flex container and allows flex items to grow and shrink within that limit.

                          
                            .container {
                                display: flex;
                                max-width: 800px; /* Set the maximum width of the flex container */
                                margin: 0 auto; /* Center the container on the page */
                            }
                            
                            .item {
                                flex: 1; /* Allow flex items to grow and shrink */
                            }

Aspect Ratio with Max Width:

The same line of code is, however, read together with the object-fit attribute, which is used to preserve the original aspect ratio even when the video reaches the maximum width.

                          
                            .container {
                                max-width: 600px; /* Set the maximum width of the container */
                            }
                            
                            .video {
                                width: 100%;
                                height: 100%;
                                object-fit: cover; /* Maintain aspect ratio and cover the container */
                            }