h5 img有白边？

最新推荐文章于 2024-04-30 11:03:18 发布

qilovehua

最新推荐文章于 2024-04-30 11:03:18 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： img 白边 h5 css

本文链接：https://blog.csdn.net/qilovehua/article/details/98625707

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<div>
  <img />
</div>

img使用了border-radius: 50%，在手机上发现边上有白边，觉得很奇怪。

在div上加上font-size: 0; 或者vertical-align: bottom; 或者img加个display: block; 都无法解决。

最后竟然发现是因为div使用position: absolute导致的，去掉后就好了。

不知道为何额。。。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qilovehua

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

img白边问题

weixin_40793759的博客

05-13

815

像这样img多余的’border‘不知道大家有没有开发中遇到过： <img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.文档 <img>元素没有基线，因此当图像在具有vertical align:b

解决img下边框留白

MittyLee的博客

01-17

1914

遇到过好几次这个问题，但总是解决之后下次就忘了，这次记录下来。。。因为img是行内元素，所以他的vertical-align的默认值是baseline，所以他的对齐方式导致了下白边产生。针对img的这个属性可以有两种解决办法： 1.把img变为块级元素 img { display：block； } 2.更改img的对齐方式 img { vertical-align: middle; } ...

参与评论您还未登录，请先登录后发表或查看评论

html width 100 无效,html css 样式中100%width 仍有白边解决办法

weixin_35933582的博客

06-05

919

Linux服务器中木马(肉鸡)手工清除方法由于自己也碰到过这种情况,刚好看到这篇文章,先转载过来.的确蛮有用的哦. 首先剧透一下后门木马如下: (当然这是事后平静下来后慢慢搜出来的,那个时候喝着咖啡感觉像个自由人) 木马名称 Linux.Ba ...rabbitMQ集群部署以及集群之间同步MQ集群部署期待的部署架构其中,一个机房有两台机器部署MQ,并组成集群,有一个机房的MQ集群作为中心集群,...

如何解决 img 标签四周出现白边的问题

yiguoxiaohai的博客

12-02

5745

如何解决 img 标签白边问题，为什么 img 会出现白边

<img>设置background有白色边框

u010552788的专栏

03-26

8380

因为没有给img标签这是src，所以浏览器当做没有图片处理，给加上了白色边框，解决方法有两个： 1.添加一个空白图； 2.不用img标签，用span、div等等

去除div中img元素四周的白边问题：

qq_41571838的博客

10-15

3708

去除div中img元素四周的白边问题：原图如下：可以发现图片周围有一圈白色边框(不确定是什么但像是边框)；在做了如下尝试后均无果： 1）img在div中的白边就是因为inline-block；造成的，所以此时将img的display设置为block；白边就消失了 2)vertical-align:top | bottom | middle 3）...... 我的如下：原理：1. 把图片拉大一点超出父盒子，然后超出的部分隐藏;(解决了右边和下边) 2. 设...

HTML（五）解决img底部空白

qq_38763173的博客

02-09

1177

前言 img一直以来有一个很大的问题就是底部空白间隙，一直以为是img默认样式造成的，后来查了相关的资料，才弄清楚为什么会产生这样的结果。首先仔细看下图中的边框与img的间隙。 img间隙用过ps文字工具的同学头知道，在使用文本工具中会出现如下的现象，字母或者汉字会超出那条基线。 PS文字工具而在CSS中也有那条线，而且inline默认的垂直对齐方式vertica...

H5C3高频知识点总结（H5C3、圣杯布局、弹性盒模型、浮动、定位）

qq_50906507的博客

11-20

1325

H5C3高频知识点总结

在vue项目中使用swiper轮播图的关于在ios中图片白边闪屏踩坑记录

weixin_44514665的博客

01-14

2872

场景描述：近日，接到一个需求，改善APP首页的布局，需要在顶部添加一个可滚动的栏目导航，以切换栏目然后切换栏目内容类似于唯品会目前的切换效果。如下图问题描述：在切换顶部栏目的时候，下面内容页的banner图片会出现短暂的白边闪屏。在android中并没有什么问题，在ios中，在左右切换栏目页的时候，顶部的轮播图会有一瞬间的图片闪屏白边。原因分析：思考原因可能是因为我没有对整...

【前端高频面试题——精简系列1】H5C3Js面试知识点

ytfty24124的博客

11-20

606

H5C3新增了哪些，标签元素分类，和特点，圣杯布局（双飞翼布局）有哪几种实现方式，弹性盒模型有哪些属性和属性值，什么效果

去除div中img元素的白边

热门推荐

键盘钢琴师的专栏

11-30

2万+

在div中的img在margin padding 为0，且broder为none的情况下依然存在白边，原因在于，img标签默认情况下display:inline-block;img在div中的白边就是因为inline-block；造成的，所以此时将img的display设置为block；白边就消失了

img标签当无图片，出现白框时

ONLYYD的博客

01-09

1602

上图代码为： <!DOCTYPE html> <html> <head> </head> <style type="text/css"> // 将背景设置蓝色 body { background-color: blue; } #xx { margin-top: 100px; margin-l...

关于vue项目数据渲染出来之前图片存在白色边框的问题

weixin_44526618的博客

08-14

1804

vue数据渲染的时候，如果你的网络有一丢丢小延迟误差，或者是数据返回比较慢的情况下。img标签会存在白色的边框~ 虽然这个问题不是什么bug。但是不解决的话总会影响整体美观！所以，一旦出现这个问题，我们只需要在css里设置一下以下相关代码。其实这段代码的意思很直观，就表示img标签的src为空的时候或者没有src的时候，将img标签的透明度设为0~ 这样就解决了数据返回渲染前，图片会出现白色小...

用img把图片放在页面上，图片之间出现空隙/白边问题

judykang123的博客

07-29

1940

如标题，直接用img在页面上放图片，在已经写了 *{ margin:0; padding:0; } 之后还会发现两张图片之间有缝隙（白边），如下图：这种情况只需要给那个img设一个 img{ display:block; } 就可以解决，效果如下图：可以看到白边已经没有了 ...

html图片自适应裁剪,html 图片裁剪图片固定高度图片自适应。图片完美适配

weixin_29599033的博客

06-04

656

工具类两个。timthumb.php/*** TimThumb by Ben Gillbanks and Mark Maunder*/define ('VERSION', '2.8.14');//Load a config file if it exists. Otherwise, use the values belowif( file_exists(dirname(__FILE__) . '/...

手机端网页中图片之间出现白线的解决方法

weixin_30401605的博客

09-21

2005

我开发的实际情况是一个纵向的图片的列表，每个img由div包裹，在手机段访问是图片之间会出现一条白线。原因是：img默认是内联模块，需要将其设置为display: block; 当然div之间也不要有margin~ 如图为修改后的情况（修改前的情况找不到了_(:з)∠)_）转载于:https://www.cnblogs.com/syzdidi/p/9686463.html...

微信小程序/h5图片拼接出现白线问题

weixin_43452154的博客

09-07

2472

出现白线，可能原因1是图片宽高出现半个像素点，可能原因2布局不为块状布局，导致出现行高咱局部分高度，导致部分手机出现白线，2、使用flex布局，在父级div用flex布局来设置，将div并列排序展示。1、在父级div加上font-size：0，将图片样式设置成块元素。3、使用margin-top来占据白线。4、给图片的父容器添加 line-height: 0;

图片img底部出现空白边距