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. 


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>.


<!DOCTYPE html>
        .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;
    <div class="container">
        <div class="image">
            <img src=
        <div class="image">
            <img src=
        <div class="image">
            <img src=


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 :