已掉线,重新登录

首页 > 绿虎论坛 > 历史版块 > 编程 > HTML/CSS/JS

标题: 求教一个css问题,万能的虎友。

作者: @Ta

时间: 2021-06-07

点击: 16768

怎么去除img图片边缘空隙问题Screenshot_20210607-020223.png

[隐藏样式|查看源码]


『回复列表(21|隐藏机器人聊天)』

1.

代码不贴一下,这是让猜喽
人生若只如初见

(/@Ta/2021-06-07 09:07//)

2. margin 设置为负数,或者父元素padding 设置为0
(/@Ta/2021-06-07 10:15//)

3.
img {
  margin: 0;
  padding: 0;
}

至于图片本身有边框,而且不同的图片边框不一样大,那就不是css能解决的了,应该P图,画布>剪裁到内容。

(/@Ta/2021-06-07 10:34//)

4. @枫叶飘@老虎会游泳,目前只能用position:fixed;left:0;top:0解决这个问题,但是不能滚动。。。@文森
(/@Ta/2021-06-07 13:27//)

5. position:fixed这个是浮动属性,加这玩意干嘛,看看图片的嵌套div和图片本身img,有没有pading属性和margin属性值,有的话就改成0,没有就再上一级div查找,找到并改成0
(/@Ta/2021-06-07 13:35//)

6.

用剪刀,剪一下试试ᥬ

本消息来自粉金版 爱欧博客

(/@Ta/2021-06-07 13:37//)

7.

@我没K,给个demo我们看看。

(/@Ta/2021-06-07 15:24//)

8.

@我没K, 不展示代码很难知道你的布局是什么样子的。

(/@Ta/2021-06-07 15:25//)

9. @枫叶飘@文森@老虎会游泳@老虎会游泳

//主要是#box怎么改?  ↓

#box {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #fff;
        position:fixed;
        top:0px;
        left:0px;
    }
/*背景图片宽度高度设置*/
    #img, .ioc-main-box {
        width: 100%;
        height:auto;
      
    }

    .ioc-main-box {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        z-index: 10;
    }

    .ioc-list {
        width: 100%;
    }

    .ioc {
        cursor: pointer;
        width: 17.6%;
        margin: 0 1%;
        object-fit: cover;
    }

    .set-box {
        position:fixed;
        top: 300px;
        left: 20%;
    }
/*贴图图片宽度*/
    .set-img {
        user-select: none;
        width: 50%;
       min-width:500px;
       max-width:200px;
        top: 0;
        left: 0;
    }

    .set-close {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 35px;
        cursor: pointer;
        box-shadow:0px 0px 8px red;
        border-radius:50px;
        left:115%;
        top:-3px;
    }


(/@Ta/2021-06-07 16:55//)

10.

@我没K,请再展示你的html,否则我们还是不知道布局是什么样子

(/@Ta/2021-06-07 17:07//)

11.

可以的话直接发在线演示,这样大家都能调试
html和css代码缺一不可,不然真就只能猜了
人生若只如初见

(/@Ta/2021-06-07 18:49//)

12.

img出现的幽灵缝隙一般是代码换行被识别为空格。直接给图片父容器加上 font-size:0 应该就没有缝隙了
小米MIX2s(白)

(/@Ta/2021-06-08 01:12//)

13. @老虎会游泳,我还没开发完,现在先测试JS,后面修改了才知道
(/@Ta/2021-06-08 01:19//)

14.

@水木易安,很可能是

(/@Ta/2021-06-08 01:22//)

15.
小米MIX2s(白)
(/@Ta/2021-06-08 01:23//)

16. @水木易安@老虎会游泳@水木易安@枫叶飘,目前代码还在完善,需要修改的太多,这个是PS拼图图片开发Screenshot_20210608-012506.png
(/@Ta/2021-06-08 01:27//)

17.

你先慢慢写
小米MIX2s(白)

(/@Ta/2021-06-08 01:28//)

18. @文森@枫叶飘@老虎会游泳@水木易安,有一点不明白的是怎么合成这些东西拼凑裁剪成一张图片?是用到画布么?
(/@Ta/2021-06-08 01:29//)

19.

@我没K,可以使用 canvas

或者直接简单的来个 html2canvas
小米MIX2s(白)

(/@Ta/2021-06-08 01:30//)

下一页 1/2页,共21楼

回复需要登录

9月15日 05:12 星期一

本站由hu60wap6驱动

备案号: 京ICP备18041936号-1