How to use flex to shrink an image in CSS ?

Last Updated : 30 Jul, 2021

You can easily shrink an image by using the flex-wrap property in CSS and it specifies whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.

Syntax:

flex-wrap: wrap

Note: wrap is used to break the flex item into multiples lines. It makes flex items wrap to multiple lines according to flex item width.

Example: In order to shrink the image, you have to make the width of the image to 100%, so that image occupies 100% of the size of the <div>.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .container { 
            display: -webkit-flex; 
            -webkit-flex-wrap: wrap; 
            display: flex; 
            flex-wrap: wrap; 
            background-color: grey; 
        } 
  
        img { 
            width: 100%; 
        } 
  
        div { 
            flex: 1; 
            padding: 10px; 
            margin: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="image"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> 
        </div> 
        <div class="image"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> 
        </div> 
        <div class="image"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> 
        </div> 
    </div> 
</body> 
  
</html> 