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
Share your thoughts in the comments
Please Login to comment...