starter_yo~ 2022-02-13 19:57 采纳率: 100%
浏览 46
已结题

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条回答 默认 最新

  • 你好!机器人 2022-02-13 20:15
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 2月25日
  • 已采纳回答 2月17日
  • 创建了问题 2月13日

悬赏问题

  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方
  • ¥15 关于生产日期批次退货退款,库存回退的问题
  • ¥15 手机应用的时间可以修改吗
  • ¥15 docker 运行OPEN-webui异常