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

最新推荐文章于 2021-06-05 12:07:59 发布
最新推荐文章于 2021-06-05 12:07:59 发布
阅读量3.9k 收藏 6
点赞数 2
分类专栏： css布局 文章标签： css布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love2016hy/article/details/78483867
版权
在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=
最低0.47元/天 解锁文章
love2016hy
关注
专栏目录
div里面放img图片出来了_解决DIV标签里面IMG图片下方留有空白的方案
weixin_39664136的博客
12-20 1671
在网页设计中，图片是不可缺少的素材，但是在div标签里面放入img图片的话，有时候会在图片的下方出现一行空间的区域，如果单纯的图片不醒目或是图片所在的位置不重要的话，我们可以不去理会，但是做为一个完美型的页且不太会前端的我来说，出现这个问题是忍无可忍的，马上上百度查资料，干掉它。图片下面出现的空白像素比如下面的一段HTML图片加载的代码这段代码，在网页中显示时，会在图片的下方出现一行空间的...
完美适配图片自适应
最新发布
weixin_42657666的博客
10-24 5857
当我们在网页中使用图片时，经常会遇到需要将图片调整为适应容器大小的情况。这篇博客将介绍通过背景图和标签的object-fit属性来实现图片自适应的几种方式。
解决 div或者a标签的高度比里面的img高度高问题
p_qmwycbf的博客
10-22 5218
描述  设置div  宽高100% a 标签 inline-block 宽高100% img固定宽高 此时img和a标签之间存在一个高度 不能消除 原因： a元素或者div元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，
css img标签高度等于宽度.
lz305263的博客
04-29 3853
以下只是个人笔记,遇到的坑. 使用JS计算的话页面加载的时候会重新渲染, 导致闪屏,用户体验非常差.. 所以只能用CSS解决, 具体代码如下; {CSDN:CODE: } 父级容器css width: 60%;height: 0;padding-bottom: 60%;position: relative; 子容器css width: 100%;height: 10
关于div中放入一个img元素导致div高度会多出几个像素的解决问题
顛沛流離的小時光
08-03 8773
在写代码的时候经常遇到这样一个问题，如果div里嵌套一个img元素且div的高度是由img的高度来撑开，那么div的高度总会比img的高度多那么几个像素。
div里面放img图片出来了_实现div里的img图片水平垂直居中
weixin_39627144的博客
12-20 1658
1.已知img的宽高情况下，设置img在div中的水平垂直居中：方法一： 将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。html代码： css样式如下：* { margin: 0; padding: 0; }div {width: 300px;height: 30...
html img和背景图处理图片不拉伸_img固定宽度和高度，不规则图片变形问题的解决方法...
weixin_31301881的博客
01-13 3165
日常项目中，后端传图不规则，比例大小不一。前端又要去做适应，是一个让人非常头大的问题。总结了一个不规则图片不变形的解决方案：注：先写一个长 300px 宽 200px 带边框的 div ，图片接近方形，实现图片正常显示不变形。...1、背景图法通过背景图的 background-position 属性，可以使图片居中显示。国外一些网站有看到类似的案例，简单好操作。.box1{background:...
解决div标签中放img图片后，图片显示不全的问题
weixin_39006917的博客
08-12 1万+
前言 想实现一个类似qq头像的效果，将方形图片放到圆形div中，设置overflow:hidden，超过的地方隐藏，代码如下。但是出现了问题，只显示了图片的一部分。（有时候会在图片下方出现空白） 1.html代码 <div class="round"> <img src="images/icon5.jpg" class="icon"> </div> 2.css代码 .round{ width:10px; .
解决自适应高度的div里放置图片在下方会有一点空白距离
LeachZhou的博客
07-10 1691
这个属于img属性问题。 img标签属于行变量标签，和文字一样，下面有一个字间距。<div> <img style ="display:block;" src="1.jpg" style="width:100%"></div>你对img属性，增加一个 display:block; 即可去掉下面空白。
IMG图片下面出现下边距的解决办法
热门推荐
萌大叔的专栏
12-19 1万+
在不同浏览器下图片下面会出现莫名的下边距，经测算在FF中 下边距大概是多出了3像素左右，而IE6更多，在IE8中展示却是完好的，以往的做法只需要将img定义为块状级就解决了问题；     但其原理是：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关 的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-
html div调整图片高度,高度不定CSS设置img充满div的解决方案（img标签3px问题）
weixin_34609222的博客
06-05 1687
高度不定CSS设置img充满div的解决方案(img标签3px问题)May 12, 2016CSS前端开发使用CSS布局的进个遇到这样一个问题：设置一个固定宽和高的div，里面放置一张图片，使图片的宽度和高度与父级的div保持一致。看起来是一个很简单的问题啊，有什么难的？常规写法于是可以这样写：*{padding:0;margin:0;}#picdiv{width:400px;height:300...
img图片自适应宽和高[转载]
qq_45251619的博客
11-07 3101
控制缩略图常见的是JS来控制，还有就是最直接的方法定义img的宽高； 下面两种方法自适应宽和高，zhenzhai推荐使用CSS方法； 一、CSS方法； 主 要是在CSS设置最小值和最大值(max-width: 100px; max- height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height &gt
img图片宽高自适应
丁晓东go
01-14 1977
项目开发中遇到的一个需求： 如果图片大小超出盒子大小，等比例缩放使图片全部显示出来的前提下，使图片的尺寸最大。 <style> .div1 { width: 300px; height: 100px; background: red; } .bg1{ /* 这种不会失真 */ max...
div或img图片高度随宽度自适应
ydxmemory的专栏
06-10 5413
<!DOCTYPE html> <html> <head> <title>div或img图片高度随宽度自适应</title> <style type="text/css"> .box{ width: 50%; margin: 50px auto; ...
css 使图片紧贴底部显示
fyinthesky的专栏
05-21 5713
css 使图片紧贴底部显示 img{ display: table-cell; vertical-align: bottom; }
div固定在另一个div的img图片中，而不是背景图片,这个div要跟着图片移动
06-01
如果您想让一个div元素固定在另一个div中的img图片上，并且这个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、付费专栏及课程。

余额充值