Skip to content
Related Articles

Related Articles

Improve Article

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=
        </div>
        <div class="image">
            <img src=
        </div>
        <div class="image">
            <img src=
        </div>
    </div>
</body>
  
</html>

Output:

flex-wrap property

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :