解决 div或者a标签的高度比里面的img高度高问题

最新推荐文章于 2023-08-23 14:43:15 发布
最新推荐文章于 2023-08-23 14:43:15 发布
阅读量5.2k 收藏 8
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p_qmwycbf/article/details/52892283
版权

描述 

设置div  宽高100%

a 标签 inline-block 宽高100%

img固定宽高


此时img和a标签之间存在一个高度 不能消除

原因：

a元素或者div元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。

解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0;


解决办法二是给两者vertical-align:top，让其top对齐，而不是baseline对齐 middle或者bottom都可以这个方法没试过？


解决办法三是给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒。img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线对齐，而不是紧贴容器下边缘。将displayp设置为block即可消除上面说的几个像素的差别。



也就是说当你嵌套在内的元素是行内文本哪么外边的div或者a标签就存在一个匿名文本的高度

最简单的消除办法就是让这个行内元素img 变为block  

当外边是a标签时  及时行内变为block还是存在一个匿名文本高度  给a设置font-size：0 或line-height：0 即可

当外边是div时直接设置img为block即可 


综上

外边是block

里边是block

里边不会有匿名文本存在无额外高度



外边是a 标签

里边是blcok

存在额外高度匿名文本

设置a block即可  设置inline-block还是存在高度

如果不想改变a  blcok  可以设置 啊lineheight或 font-size


外边是block

里边是行内文本

存在高度

设置里边block即可  










DIV高度随里边内容的增多而增高
zhangemails的专栏
06-16 2146
.wrap{width:776px;background:url(images/bullet.png)repeat-y 100%;}           .clear{clear:both;}
div中img图片下方空白问题，div高度不等于img图片的高度，会留出几个像素
love2016hy的博客
11-08 3966
在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>
[CSS]div比其内部的img略高
04-11 232
因为img是inline元素，默认baseline对齐（vertical-align: baseline;）。 解决方式： img { display: block; /* 或 vertical-align: bottom; */ } 顺带一提： vertical-alig...
解决HTML中div比其所包含的img高度高的问题
Moon Star
07-27 794
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> *{
IE6和IE7中<a>标签宽高设置无效的问题
dianyan5615的博客
09-02 144
昨天写了一个引导界面， 发现界面中的IE67存在一个问题， 在某些情况下， A锚链接如果设置了宽高，而且position:absolute的情况下， A标签的宽高无效， 至于总体的效果， 因为这个A标签受到父级的影响， 单独写DEMO的话，这个bug一直无法复现出来， 不知道是什么原因： 　　实际上出现的问题如下图，其中两个A标签宽度是整个页面的50%， 两个A标签都...
解决html里a标签嵌套img标签存在上下高度空白问题
管乐明的博客
04-10 789
解决html里a标签嵌套img标签存在上下高度空白问题 先上代码 实际中遇到的情况：a标签存在一个高度把img 标签挤出div <header> <div><a href="##" ><img src="./img/icon_back.png" alt=""></a></div> <div style="font-size: .4rem;">APP应用</div> &l
div或img图片高度随宽度自适应的方法
12-28
二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片上方垂直居中展示文字的，如果不需要可以选择最下方更简洁的代码） <div class=box> 行内元素垂直居中 <div class...
a标签里面包裹img标签，两者要完全登高等宽
qweasdzxc_1092665276的博客
04-02 5218
废话不多说，直接上代码。html:&lt;div id="head_game_name" class="head_game_name"&gt; &lt;a href="javascript:;" class="pic1"&gt;&lt;img src="img/nav_pic_icon01.png" alt="" &gt;&lt
解决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; .
纯Css实现Div高度根据自适应宽度（百分比）调整
11-20
但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例=-=）。 要实现这种功能（div的高度：宽度=1:1），通过各种加Buff，得知有以下几种处理方式 1，直接指定...
当<div>中含有<img>时，<div>的高度比<img>的高度要多3px。如何解决？
於刚的博客
04-04 613
如果将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？ 因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。 要去掉空格可以使用vertica
标签里只有一个img，高度比图片占有的空间还高了一点
qq_35685011的博客
11-28 260
标签里只有一个img，高度比图片占有的空间还高了一点
display设为inline-block时引发的高度问题，大坑
最新发布
前端小菜鸟也有人起的博客
08-23 375
display设为inline-block时引发的高度问题
关于inline-block高度带来的bug及解决方案
qq_25650505的博客
11-27 1502
目录前言寻找问题的根源1. input标签默认样式中的影响因素2. 排除elementUI对input标签的影响解决方法 前言 今天在开发当中偶然遇到一个问题，如下图，这里引入一个 input标签，利用input的focus来实现时间线的定位。 在 v-show 和 v-if 为 false 时不能正常的调用focus方法来实现时间线的定位，所有要通过css样式来将input标签从页面内“隐藏”，同时不能通过display:none的方式来实现 于是就尝试，将input的宽 高 内外边距设置为0，于是问题
父元素设置指定高度，而子元素高度大于父元素问题
weixin_45847735的博客
11-26 1953
父元素设置指定高度，而子元素高度大于父元素，是否父元素高度会发生变化： 答案：不会，父元素高度依然等于父元素设置的高度。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
解决div比里面包含的img图片高度大的问题
u010007013的博客
06-17 6313
如果用div包裹一个img，你会发现div的高度要超过img的高度。 搜集了一下解决方法主要有几种： 1.div设置font-size:0 <div style="font-size:0"> <img /> </div> 2.div设置display:flex <div style="display:flex"> <img />...
div高度根据内容物高度自适应的方法
热门推荐
夜空下的凝视
05-16 1万+
示例： HTML中： <div class="lei"> <p>电脑</p> <ul> <li><b>台式电脑</b></li> <span>3666.00</span> </ul> <ul>...
a标签内放置img时，a比img高的问题
JandyPam的博客
07-19 644
当A标签的display为block时，img在a内的垂直对齐方式是vertical-align默认值为baseline，所以img最垂直对齐时是按照a的基线对齐而不是底线。 解决办法 设置line-height a{ line-height: 0; } line-height的值默认是按照font-size的值乘以一定比例计算得来 line-height设置为0时，基线与底线间距离为0，空白消除 设置vertical-align img{ vertical-align:bottom; }
img图片自适应div大小 当图片高度接近div高度时height:100%; 否则width:100%;
05-25
可以使用CSS中的object-fit属性来实现图片自适应div大小的效果。 首先，设置div的宽度和高度，如下所示： ```css div { width: 500px; height: 500px; } ``` 然后，将img标签添加到div中，并设置object-fit属性为contain，这样当图片高度小于div高度时，图片会按比例缩放以适应div大小。同时，设置height为100%，让图片高度与div相等。 ```css div img { object-fit: contain; height: 100%; } ``` 最后，当图片高度接近div高度时，我们希望图片的宽度铺满整个div，可以使用@media查询来实现。当图片高度大于等于90%的div高度时，将object-fit属性设置为none，同时将width设置为100%。 ```css @media screen and (min-height: 90%) { div img { object-fit: none; width: 100%; } } ``` 这样，当图片高度接近div高度时，图片就会铺满整个div。完整的CSS代码如下所示： ```css div { width: 500px; height: 500px; } div img { object-fit: contain; height: 100%; } @media screen and (min-height: 90%) { div img { object-fit: none; width: 100%; } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值