Image taking full height even though height is set to 80%

iMightjustGiveYouaBite 0
Viewed 21

My img is taking the full width of my container even though height: 80%. I tried changing it to 1% but it still take up the whole container. Also, one thing I found really weird is, the container, .card-top, doesn't care about the height: 30%. I tried chaging the 30% to other values but its still the same height. Its like following the img's height.

.card-top {
    width: 30%;
    height: 30%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e3dcee;
    border-radius: 7px;
}

.card-img {
    height: 80%;
    width: 75%;
    
}
<div class="card">    
        <div class="card-top">
                <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunset-quotes-21-1586531574.jpg" alt="card-1" class="card-img">
        </div>          
    </div>

css html
1 Answers

.card-top takes up 30% of it's parents height. However, since you haven't defined that height, it doesn't know what height it must be.

.card { height: 400px; }

.card-top {
    width: 30%;
    height: 30%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e3dcee;
    border-radius: 7px;
}

.card-img {
    height: 80%;
    width: 75%;
    
}
<div class="card">    
        <div class="card-top">
                <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunset-quotes-21-1586531574.jpg" alt="card-1" class="card-img">
        </div>          
    </div>

LinkinTED0
Related