HTML+CSS通过position:relative移动图片导致图片高度和设置高度不一致

Question

我想让包裹图片的img_box高280，宽200然后图片高宽100%填满，但是我发现非要把img_box和文字用div包裹才能使得图片的高度真正的是280，不用div的话达不到280px，想问是为什么呢😥，和position:relative有关吗

<div>
           <div class="img_box">
               <img src="./img/tihuan.jpg">
            </div>
            <h4 class="hh4">hhhhhh44</h4>
 </div>

<div class="img_box">
       <img src="./img/tihuan.jpg">
</div>
<h4 class="hh4">hhhhhh44</h4>

附上代码：

.main_movie {
        width: 200px;
        height: 280px;
    }

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

    .card {
        position: relative;
        max-width: 200px;
        height: 290px;
        background-color: #fff;
        margin: 30px 10px;
        padding: 0px 20px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 5px 202px rgba(0, 0, 0, 0.5);
    }

    .hh4 {
        margin: 0;
        text-align: center;
        font-size: 8px;
        padding-top: 3px;
        position: relative;
        top: -30px;
    }

    .img_box {
        position: relative;
        top: -30px;
        width: 200px;
        height: 280px;
        z-index: 1;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
        background-color: rgb(204, 201, 201);
    }

<div class="card">
        <!-- <div>
            <div class="img_box">
                <img src="./img/tihuan.jpg">
            </div>
            <h4 class="hh4">hhhhhh44</h4>
        </div> -->
        <div class="img_box">
            <img src="./img/tihuan.jpg">
        </div>
        <h4 class="hh4">hhhhhh44</h4>
    </div>

Answer 1

.card里的display: flex; flex-direction: column;影响 到了