HTML5/CSS3: image as flex item
Question
I am trying to add image to the flex item, but i am not able to fit it to the complete div container.
following is my code. can someone advise how can i have image fit in to flex item (div container).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Box</title>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 800px;
height: 500px;
background-color: blueviolet;
-webkit-flex-direction: column-reverse;
flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.flex-item {
background-color: bisque;
margin: 15px;
width: 600px;
flex-grow: 1;
}
.third_item {
-webkit-flex: 1;
flex: 1;
}
#iimage {
background-color: transparent;
}
</style>
</head>
<body>
<article class="flex-container">
<div class="flex-item third_item">
<img src="block_beach_1.jpg" width="600px" height="100px" id="iimage">
</div>
</article>
</body></html>
1 answers
solution1
1 ACCPTED 2019-11-26 04:11:25
This will force the image to be the complete height and width of the flex-item container.
<!DOCTYPE html> <html lang="en"> <head> <title>Flex Box</title> <meta charset="utf-8"> <style> .flex-container { display: -webkit-flex; display: flex; width: 800px; height: 500px; background-color: blueviolet; -webkit-flex-direction: column-reverse; flex-direction: column; -webkit-align-content: stretch; align-content: stretch; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-around; justify-content: space-around; } .flex-item { background-color: bisque; margin: 15px; width: 600px; flex-grow: 1; } .third_item { -webkit-flex: 1; flex: 1; } #iimage { background-color: transparent; max-width: 600px; max-height: 500px; height: 100%; width: 100%; } </style> </head> <body> <article class="flex-container"> <div class="flex-item third_item"> <img src="http://writingexercises.co.uk/images2/randomimage/hand-water.jpg" id="iimage"> </div> </article> </body></html>
You can view the JSFiddle
The important code updates were:
CSS
#iimage {
background-color: transparent;
max-width: 600px;
max-height: 500px;
height: 100%;
width: 100%;
}
HTML
Remove forced inline widths from the img element: width="600px" height="100px"
Is this what you were after?
solution2
0 ACCPTED 2019-11-26 04:28:46
You can fit the image to the container by specifying a width 100% in your css for the image. Also remove the inline width and height property for the image.
Edit: If you want to fit the image horizontally and vertically, apply height 100% along with the width value.
.flex-container { display: -webkit-flex; display: flex; width: 800px; height: 500px; background-color: blueviolet; -webkit-flex-direction: column-reverse; flex-direction: column; -webkit-align-content: stretch; align-content: stretch; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-around; justify-content: space-around; } .flex-item { background-color: bisque; margin: 15px; width: 600px; flex-grow: 1; } .third_item { -webkit-flex: 1; flex: 1; } #iimage { width: 100%; height: 100%; background-color: transparent; }
<article class="flex-container"> <div class="flex-item third_item"> <img src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg" id="iimage" /> </div> </article>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.