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;影响 到了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 关注

    我这测试是280啊

    img

    评论 编辑记录
  • 沐卿゚ 2022-02-15 10:30
    关注

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

    img

    评论
  • 有问必答小助手 2022-02-17 19:11
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(3条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥20 python 3des pyDes库
  • ¥15 关于#mysql#安装失败的问题。MySQL
  • ¥15 想问一下for循环计算表达式的方法,第一次接触
  • ¥15 如何在VA框架上面加功能,去读取框架内任何app数据功能
  • ¥15 关于#c语言#的问题:用c或c++写一个计算下列问题有关软件工程的代码并加上分析
  • ¥15 Zeppelin0.10.0版本升级lib包下的shiro-web
  • ¥15 链表入队的指针内存问题
  • ¥20 vba如何写本地html文件执行js
  • ¥15 VS2022的C#如何创建
  • ¥20 关于#用户注册#的问题,如何解决?