div中img图片下方空白问题,div高度不等于img图片的高度,会留出几个像素

在CSS布局中,div包含img图片时会出现高度不匹配,导致底部留有空白。这是因为img作为行内块元素,其vertical-align默认为baseline。通过设置img的vertical-align属性为middle、top或bottom,可以消除空白。调整line-height的值会影响div的高度。理解vertical-align和line-height的关系是解决此问题的关键。
摘要由CSDN通过智能技术生成

在div中加入img图片时会发现div的高度并不等于img图片的高度,借用一下小米的logo做了一下测试,代码简单明了,请继续往下看:

<html>
    <div class="wrap">
        <img src="https://m.mi.com//component/header/img/logo_121d4a6.png" alt="logo">
    </div>
    <br>
    <div class="wrap">
        <img src="https://m.mi.com//component/header/img/logo_121d4a6.png" alt=
如果您想让一个div元素固定在另一个divimg图片上,并且这个div元素要跟着图片移动,可以使用JavaScript来实现。具体的做法是: 1. 首先,在外层的div元素插入一个img标签和一个内层的div元素。 2. 使用JavaScript获取img元素的位置和大小,然后将这些信息应用到内层div元素的样式。 3. 监听窗口的resize和scroll事件,当这些事件发生时,重新计算内层div元素的位置和大小,并更新其样式。 下面是一个示例代码,演示如何在一个img图片上固定一个div元素,并让这个div元素跟着图片移动: ```html <div class="outer-div"> <img src="your-image-url.jpg" alt="your image"> <div class="inner-div"></div> </div> ``` ```css .outer-div { position: relative; } img { display: block; width: 100%; height: auto; } .inner-div { position: absolute; top: 0; left: 0; z-index: 1; width: 200px; height: 200px; background-color: rgba(255, 255, 255, 0.5); } ``` ```javascript const outerDiv = document.querySelector('.outer-div'); const img = outerDiv.querySelector('img'); const innerDiv = outerDiv.querySelector('.inner-div'); function updateInnerDiv() { const imgRect = img.getBoundingClientRect(); const outerDivRect = outerDiv.getBoundingClientRect(); innerDiv.style.width = `${imgRect.width}px`; innerDiv.style.height = `${imgRect.height}px`; innerDiv.style.top = `${imgRect.top - outerDivRect.top}px`; innerDiv.style.left = `${imgRect.left - outerDivRect.left}px`; } window.addEventListener('resize', updateInnerDiv); window.addEventListener('scroll', updateInnerDiv); updateInnerDiv(); ``` 在上面的代码,我们首先使用JavaScript获取了外层div元素、img元素和内层div元素,然后定义了一个updateInnerDiv函数来更新内层div元素的位置和大小。在updateInnerDiv函数,我们使用getBoundingClientRect方法获取了img元素和外层div元素的位置和大小,然后通过计算得到了内层div元素的位置和大小,并将这些信息应用到内层div元素的样式。 最后,我们监听了窗口的resize和scroll事件,当这些事件发生时,调用updateInnerDiv函数重新计算内层div元素的位置和大小,并更新其样式。在页面加载完成后,我们也调用了一次updateInnerDiv函数,以确保内层div元素的位置和大小能够正确地初始化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值