问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么解决img里面src为空状态下的边框问题

头像
ǒ滴寳唄
    511511

    clipboard.png
    目前除了用占位图去解决当前的这个img这个白色框的问题。还有其他的方法吗
    clipboard.png

    现在原型图和设计图是这样的，要求颜色这个img的颜色和上面的那个input的颜色是一致的。但是我现在这个边框解决不了

    clipboard.png

    csshtml5htmljavascript
    阅读 12.1k
    5 个回答
    得票最新
    头像
    yzllee
      2.9k1324
      ✓ 已被采纳
      头像
      StinsonZhao
        3.5k32131

        因为浏览器找不到图片，就会用一个边框来表示

        你可以用div代替img用作占位，然后用户上传后，包装成img标签，再插入到这个div里面

        头像
        不爱吃西红柿的鱼
          8.2k21124
          头像头饰
          kumfo
          6.7k33257
          img {border:none;outline:none}
          头像
          ǒ滴寳唄
            511511

            根据大家提供的我整理了一下。你们可以看看
            .m-switchi .img{/外面的div/

            display:inline-block;
width:160px;
height:80px;
border:2px solid #353d48;
box-sizing: border-box;

            }
            .img img{
            width:100%;
            height:100%;
            border:1px solid #353d48;
            }
            .img img[src='']{
            opacity:0;
            }
            大同小异的另一种
            <!DOCTYPE html>
            <html lang="en">
            <head>

            <meta charset="UTF-8">
<title>Document</title>
<style>
    img{width:100px;height:100px;border:0;outline:0;vertical-align: top}
    /*img[src=""]{opacity:0;}*/
    /*div{border:2px solid #f00;display:inline-block;}*/

    img{padding:1px;margin:-2px;}
    div{border:1px solid #f00;display:inline-block;overflow:hidden;}
</style>

            </head>
            <body>

            <div><img src="" ></div>
<div><img src="" ></div>
<div><img src="http://upcdn.mpres.51vv.com/image/de6f012f0c6034f54baa1a7ac0d19f06.jpg" ></div>

            </body>
            </html>

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题