What is the difference between display: inline and display: inline-block in CSS?

How to Auto-Resize an Image to Fit a Div Container?

Last Updated : 23 May, 2025

To resize an image or video to fit inside a div container, use the object-fit property for precise control over how the content fits.

object-fit maintains the aspect ratio or stretches the content to fill the container.
Common values include cover (fills the container, may crop) and contain (fits within the container without cropping).

Different Ways to Auto-Resize an Image to Fit a Div Container

1. Using object-fit: cover;

This method ensures the image covers the entire container while maintaining its aspect ratio, potentially cropping parts of the image.

index.html

<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
             alt="Sample Image">
    </div>
</body>
</html>

The object-fit: cover; property ensures the image covers the entire container, potentially cropping parts of the image to maintain its aspect ratio.

2. Using object-fit: contain;

index.html

<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
             alt="Sample Image">
    </div>
</body>
</html>

The object-fit: contain; property scales the image to fit within the container without cropping, preserving the entire image but potentially leaving empty space if the aspect ratios differ.

3. Using max-width: 100%; and height: auto;

index.html

<html>
<head>
    <style>
        .container {
            width: 300px;
            border: 1px solid #000;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
             alt="Sample Image">
    </div>
</body>
</html>

Setting max-width: 100%; and height: auto; ensures the image scales down to fit the container's width while maintaining its aspect ratio, preventing distortion.

How to auto-resize an image to fit a div container using CSS?

What is the difference between display: inline and display: inline-block in CSS?

S

Sabya_Samadder

Improve

Article Tags :

Similar Reads

Space between two rows in a table using CSS

The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp

What is the difference between display: inline and display: inline-block in CSS?

The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If w

How to Write a:hover in Inline CSS?

The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage. For the :hover eff

How to place two div side-by-side of the same height using CSS?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which

What is a clearfix?

A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally. If the element is taller than the element containing it then use the overflow

Making a div Vertically Scrollable using CSS

The overflow property in CSS controls how content that goes beyond an element's boundaries is handled. It can either hide the extra content or add scrollbars so users can scroll to see more without leaving the current view. This helps display large amounts of content, such as text, images, or tables

How to give a div tag 100% height of the browser window using CSS

CSS allows to adjustment of the height of an element using the height property. While there are several units to specify the height of an element. Set the height of a <div> to 100% of its parent container with height: 100%, or use height: 100vh; for a full viewport height, ensuring the <div

Wildcard Selectors (*, ^ and $) in CSS for classes

Wildcard selectors can be used with attribute selectors. The asterisk (*) matches any character, the caret (^) matches the start, and the dollar sign ($) matches the end of an attribute value. For example, .class* selects all elements with a class attribute containing "class" anywhere, .class^ selec

How to style a dropdown using CSS?

We will learn how to style the dropdown list using CSS and explore its implementation through examples. Dropdown menus are commonly used to allow users to select an option from a predefined list. Styling them properly can enhance your website's user experience and visual appeal.What is a <select

Remove border from IFrame using CSS

The <iframe> tag is used to embed another web page within a webpage. To remove the border from an <iframe>, you can use the frameBorder attribute in the <iframe> tag, setting its value to "0".Syntax:<iframe frameBorder="value"></iframe>Note:The frameBorder attribute is