Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Auto-resize an Image to Fit into a DIV Container using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS max-width Property

You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.

Additionally, you can also apply the max-height property if you've a fixed height div element, so that the image doesn't overflow from the div's boundary horizontally or vertically.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resize Image Proportionally with CSS</title>
<style>
    img{
        max-width: 100%;
        max-height: 100%;
        display: block; /* remove extra space below image */
    }
    .box{
        width: 250px;        
        border: 5px solid black;
    }    
    .box.large{
        height: 300px;
    }
    .box.small{
        height: 100px;
    }
</style>
</head>
<body>
    <h2>Image inside Auto-height Div</h2>
    <div class="box">
        <img src="images/sky.jpg" alt="Cloudy Sky">
    </div>
    <br>
    <h2>Image inside Portrait Div</h2>
    <div class="box large">
        <img src="images/sky.jpg" alt="Cloudy Sky">
    </div>
    <br>
    <h2>Image inside Landscape Div</h2>
    <div class="box small">
        <img src="images/sky.jpg" alt="Cloudy Sky">
    </div>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates