问题记录：img标签下展示图片，图片下端有一条空白的解决办法

最新推荐文章于 2021-12-02 11:41:28 发布
最新推荐文章于 2021-12-02 11:41:28 发布
阅读量481 收藏
点赞数
分类专栏： 日常问题记录 文章标签： html html5 css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzz00008LN/article/details/119942497
版权

div标签嵌套img标签时，展示出的图片底部会出现白边

原因：img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。
在这里插入图片描述
解决办法：要去掉空白部分可以使用vertical-align: bottom或将img标签变为块级元素。

基线知识补充

在这里插入图片描述
一梦晓三生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
img 标签下多余空白的解决方法
12-10
1、将图片转换为块级对象 即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。 2、设置图片的垂直对齐方式 即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub img {vertical-align:top;}”。 3、设置父对象的文字大小为0px 即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设
去除img标签图片底部空白
StacyMo的博客
07-25 2737
<div style="background-color: lightgray;margin: 0;padding: 0;"> <img src="test.jpg"> </div> 以上代码的结果如下图： 图片下面出现留白（div的背景），那么如何去掉空白呢？ 产生空白的原因： 因为图片的display属性默认是inline，vertical-...
img 图像底部留白的原因以及解决方法
weixin_30709809的博客
06-07 616
有时候，我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值，在有些浏览器中打开就会出现图像底部留白，为什么为造成这个原因？下面就来进行分析：由于img元素默认为inline元素，而inline元素的vertical-align属性的默认值为baseline文字基线对齐，正好图片底部的留白就是baseline和bottom之间的距离。最后就给大家分...
如何解决 img 标签四周出现白边的问题
yiguoxiaohai的博客
12-02 4866
如何解决 img 标签白边问题，为什么 img 会出现白边
img标签下有一条线
Nero的博客
09-03 1615
img下面有一条线 之前再做一个需求的时候，是点击一个按钮出弹出一个dialog，然后就是一张图，但是不知道怎么回事，怎么调整，对话框下面总是有一条白色的线，或者说空白。网上查了好久，才找到解决方法。 图已经找不到了，就直接说解决方法吧。 1.刚开始查到说是用font-size:0，试了下，不行。 2.最后找到结果，在标签里加入vertical-align: bottom就可以了。 具体...
PIL Image创建空白图片的bug
guli_qi的博客
04-21 1064
今天在使用PIL Image创建空白的黑白图时遇到个诡异的bug，直接贴代码 from PIL import Image import numpy as np # 先创建个256x256，全部值为True的numpy数组 x = np.ones((256, 256)).astype(bool) # 使用Image.new创建一个模式为'1'（黑白）的空白图片 img = Image.new('1', (256, 256), 1) y = np.asarray(img) # x和y值相同，类型相同 pr
img标签底部总是留有一条白色空隙
山有木兮木有枝 心悦君兮君不知
09-20 3799
问题描述： img标签底部总是留有白色空隙，仔细查了，不是多余的标签，也不是margin造成的，问题如下图： 造成此现象的原因： img标签为行内元素，默认对其方式为vertical-align: baseline(基线对齐) 。图片默认的垂直对齐方式是基线，基线的位置与字体相关，所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 会造...
解决div里面img图片下方有空白的问题
weixin_39415598的博客
11-19 1063
0001.jpg 在开发的过程中，我发现插入一张图片后，下面想紧跟着一个带背景色的div，不管我怎么折腾他都有一条白边。后来研究了一下发现自己对img标签了解的真不够深入。 image.png html代码： <body> <header>header</header> <...
IE6图片元素img下出现多余空白的问题
09-27
网页制作Webjx文章简介：在进行页面的DIV CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”，根据原因的不同要用不同...
图片元素img在IE6下出现多余空白问题
09-28
在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”，根据原因的不同要用不同的解决方法，这里把解决...
用正则表达式替换图片地址img标签
09-04
如何替换一段HTML字符串中包含的所有img标签的src值？下面我们用正则解决这个问题
【转】IE6下IMG下出现空白条的解决方法汇总
weixin_34179968的博客
05-06 102
IE6的又一BUG，一直没太在意这个问题，今天在做页面的时候才发现这个问题严重影响了浏览器的兼容，因为页面主要以图片列表为主。那就是IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白，对于该问题的解决方法也是“见机行事”，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法搜罗归纳，供大家参考。方法整理来源于万福的I...
html图片中间有细缝,CSS解决img空白缝隙问题...
weixin_42300211的博客
06-10 1616
img元素默认样式导致，因为行内元素默认的垂直对齐方式基准线baseline，使得字体下方会有空隙。# html #cssdiv {border: 1px solid #ccc;width: 200px;}复制代码1. 给定div边框border: 1px solid #ccc;后如图，两张图片之间有3px空隙，图片下方也将div撑出3px空隙：2.给div固定宽度width: 2...
解决div标签中放img图片后，图片显示不全的问题
weixin_39006917的博客
08-12 9942
前言 想实现一个类似qq头像的效果，将方形图片放到圆形div中，设置overflow:hidden，超过的地方隐藏，代码如下。但是出现了问题，只显示了图片的一部分。（有时候会在图片下方出现空白） 1.html代码 <div class="round"> <img src="images/icon5.jpg" class="icon"> </div> 2.css代码 .round{ width:10px; .
关于<img>导入图片下面有空白的问题解决方案
weixin_33781606的博客
11-30 418
上图代码，在网页中导入图片后下面会有一小段空白。在谷歌浏览器调试的时候，会发现外面的包裹层<a>元素的height要比<img>的height多了3个像素（此时已经设置了a{display:block;}）。这在网页设计中比较令人头疼，有时候会因为这样一个小空白导致图片无法对齐等等。当然，也有人说 分析原因：知乎上有篇文章讲得很不错。链接：http://www.zhi...
uniapp image标签图片不会居中显示
xjh01的博客
09-05 5899
用image标签时，图片是自动靠左，如果图片不足够大的话，右边就会有空白。 系统默认的是 uni-image { display: inline-block; } 可见是行内块 这个时候在自己的页面下，配置css 可以转换为 display:block 然后margin： 0 auto； 这样就能实现居中了 ...
JavaScript： 解决了＜el-image＞频繁加载图片出现白色边框问题
weitaming1的博客
03-29 1789
问题描述 当频繁加载图片并渲染的时候，出现加载渲染图片的控件在两张图片切换的过程中出现白色闪烁的问题。 问题排查 查看源代码后，发现html中用 元素来显示图片的。 并且通过改变：src="jpgPath"的值来替换图片。 解决方法： 临时解决方法： 用canvas 绘制图片的方式来代替 。 新问题： 1. canvas 直接不断的绘制image,会出现闪屏的问题。 解决方法：使用双缓存解决 Canvas clearRect 引起的闪屏问题 : 使用双缓存解决问题 updateCanvas(){
为什么图片img下方会出现一行空白？
⑥②专栏
04-08 1725
我们在使用inline或inline-block做img图片对齐的时候，通常会发现图片下方有一行空白，这样的空白直接影响我们的显示效果，那么为什么会出现那样的空白呢？ 可以看到上图，图片底部就是基线位置，蓝色的线就是底线位置，这是由于行内元素的vertical-align的对齐方式默认为baseline。图片和单词是两个行内元素，如果想上下居中对齐，需要对图片和单词都设置vertical-a...
html图片下方会有一像素,移动端img下方出现1像素空隙怎么解决？
weixin_29150247的博客
06-04 1014
用div包裹img，img负责撑开div，Chrome仿真缩小比例会导致img下方出现一条细小的缝隙，且在iPhone7，小米note等真机上也会出现！！！Chrome截图：真机截图：html结构： css代码：html,body {margin: 0;}.w {font-size:0;padding: 0;margin: 0;overflow:hidden;font-size: 0;}...
CSS代码：img标签里面的图片缩放模式
最新发布
06-11
可以使用 CSS 的 object-fit 属性来控制 img 标签中的图片缩放模式，其可选值包括： - fill：填充整个容器，图片可能会被拉伸变形 - contain：保持图片比例，缩放以适应容器，容器可能有空白区域 - cover：保持图片比例，缩放以填充容器，图片可能会被裁剪 - none：保持图片原始大小，不缩放 - scale-down：保持图片比例，缩放至能完整展示图片的最大尺寸 例如，可以使用以下代码将 img 标签中的图片缩放模式设置为 cover： ```css img { object-fit: cover; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值