starter_yo~
2022-02-13 19:57
采纳率: 100%
浏览 45

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>

img

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

img

附上代码:

.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>

4条回答 默认 最新

相关推荐 更多相似问题