Problem with square image height within rectangular div

Question

I have the following structure:

<style>
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
height: 200px;
padding: 5px;
margin: 42px;
border: 1px solid #CCC;
}
div img {
  width: 50%;
}
</tyle>

<div>
      <img src=''>
</div>

The problem: That one image is square and the div rectangular.

How do I make image NAY stay with the wrong time within div ? I mean, stop staying square because of the width: 50%?

I’ve tried to height: auto in image but it didn’t work out!

I’ve tried to max-width: 50%;in image but it didn’t work either!

Answer 1

I don’t expect you to understand the problem, really, I find it very unlikely that you will understand what happens, but basically it is because of the padding that you used in the container father, that padding ends up influencing the child who has values in %.

That values of padding of the father end up "adding" to the values in % of the children, since the padding always adds to the box-model, as well as the bordas tb if they add the total width/height of the element, unless you say otherwise, as I explain below.

To solve just what you put box-sizing: border-box; for the padding value does not change the size of the box-model, or else you don’t use padding on the father and use margins in the son, as I did in the examples below.

div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    height: 200px;
    padding: 5px;
    margin: 42px;
    border: 1px solid #CCC;
}

div img {
    width: 50%;
}

body {
    display: flex;
}

<div style="box-sizing: border-box;">
    <img src="https://www.placecage.com/100/100">
    <br>
    com box-sizing
</div>
<div>
    <img src="https://www.placecage.com/100/100">
    <br>
    sem box-sizing
</div>
<div style="padding: 0;">
    <img style="margin: 5px" src="https://www.placecage.com/100/100">
    <br>
    sem padding no pai<br>
    com margin no filho
</div>