Image height stretching in flexbox - html

Question

So I already researched this briefly. I put an img in a div and made the img width 100%, which should have an impact on the height. I'm not understanding what's going on here. I just need my images to remain to their proper aspect ratio in the following flexbox.
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
height: 100vh;
width: 80%;
/*padding-top: 2%;
padding-bottom: 18%;
margin: 5% auto 8% auto; */
background-color: white;
border: 2px solid red;
}
.top {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
border: 2px solid blue;
}
.top * {
1 1 50%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
height: 100%;
}
.bottom {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
border: 2px solid orange;
}
.top,
.bottom {
flex: 0 0 100%;
height: 50%;
}
.topa {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 50%;
height: 100%;
background-color: orange;
}
.topa div img {
width: 100%;
}
<div id="bigwrap">
<div class="container">
<div class="top">
<div class="topa">
<div>
<img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
</div>
<div>
<img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
</div>
</div>
<div class="topb">
</div>
</div>
<div class="bottom">
</div>
</div>
</div>

Answer 1

You are not using flexbox in the right way.
To do what you want margin:auto on .topa is enough...
Here is a css-tricks article to explain very weel how flexbox works
.container {
position: relative;
height: 100vh;
width: 80%;
background-color: white;
border: 2px solid red;
}
.top {
border: 2px solid blue;
}
.top * {
height: 100%;
}
.bottom {
border: 2px solid orange;
}
.topa {
width: 50%;
height: 100%;
background-color: orange;
margin: auto;
}
.topa div img {
width: 100%;
}
<div id="bigwrap">
<div class="container">
<div class="top">
<div class="topa">
<div>
<img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
</div>
<div>
<img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
</div>
</div>
<div class="topb">
</div>
</div>
<div class="bottom">
</div>
</div>
</div>

Answer 2

Use max-width for your image in CSS. And remove width?and height atribute from image tag. Or use height property auto in your img tag and css is-
.topa div img {
Max-width: 100%;
Height:auto;
}