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

我想让包裹图片的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>

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

我这测试是280啊

你可以给图片设置一个宽高，相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632