how to make this conatainer half of another container

Question

Hi I don't know how to make container for image 50% height of size .card. I tried to add % or pixels still doing the same thing I want that div for image will be 50% of size of card:

css:

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@media print {
body {-webkit-print-color-adjust: exact;}
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: linear-gradient(90deg,black,#022a3c) fixed;
    padding:50px;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
}

.card-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.card{
    width: 140px;
    height: 320px;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    padding: 20px;
    transition: all .3s ease-in;
}
.card > *{
    padding: 10px;
}
.card .card-image{
    width: 100%;
    height: 50%;
    text-align: center;
    border-style: solid;
}

I tried % and another but still do some errors

Answer 1

If you want to make the container for the image 50% of the height of the .card element, an easiest way to do it is by setting the container for the image to 100% height of the parent and changing the vertical padding of .card from 20px to 80px. Here is your code with those fixes.

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@media print {
body {-webkit-print-color-adjust: exact;}
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: linear-gradient(90deg,black,#022a3c) fixed;
    padding:50px;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
}

.card-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.card{
    width: 140px;
    height: 320px;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    padding: 80px 20px;
    transition: all .3s ease-in;
}
.card > *{
    padding: 10px;
}
.card .card-image{
    width: 100%;
    height: 100%;
    text-align: center;
    border-style: solid;
}

<div class="card-container">
    <div class="card">
        <img src="https://picsum.photos/200" class="card-image">
    </div>
</div>