Trying to fit image inside a flex box in CSS

user_1590079 0
Viewed 56

This is how I want the page to split, so that I can have a fluid layout.

<div class="container">
  <div class="top">Top</div>
  <div class="image">image</div>
  <div class="footer">footer</div>
</div>

.container{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 25%;
  width: 100%;
  background-color: red;
}

.image {
  flex: 50%;
  width: 100%;
  background-color: green;
}

.footer{
  flex: 25%;
  width: 100%;
  background-color:blue;
}

https://jsfiddle.net/9n7zmr60/

In the image section, I wanna insert an image and I want it to fit in the same ratio (25% 50% 25%) as above. However, when I try, its getting stretched like below:

.container{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 25%;
  width: 100%;
  background-color: red;
}

.image {
  flex: 50%;
  width: 100%;
  background-color: green;
  max-width: 100%;
  object-fit: contain;
  
}

.footer{
  flex: 25%;
  width: 100%;
  background-color:blue;
}

https://jsfiddle.net/qcnwu7fe/

Please help

flexbox css html
1 Answers

Do this changes:

.image {
  flex: 50%; /*delete this*/
  height: 50%;
  width: 100%;
  background-color: green;
}
img{
  height: 100%;
  width: 100%;
}


.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 25%;
  width: 100%;
  background-color: red;
}

img {
  height: 100%;
  width: 100%;
}

.image {
  width: 100%;
  background-color: green;
  height: 50%;
}

.footer {
  flex: 25%;
  width: 100%;
  background-color: blue;
}
<div class="container">
  <div class="top">Top</div>
  <div class="image"><img src="https://static1.momsimage.com/wordpress/wp-content/uploads/2019/08/Kids-cartoons.jpg" alt=""></div>
  <div class="footer">footer</div>
</div>

user_170071840
Related