html - 如何消除图像周围的方形边框？

This question already has answers here:

remove the thin line in header images in bootstrap
                                
                                    （2个答案）
                                
                        
                                2年前关闭。
            
                    
我的图像具有圆形形状，但是如何摆脱方形正方形边缘/边框？



的HTML

<div id="picture">
<input type='file' id="input">
<img [src]="url" id="Image">
<label for="uploadinput" id="uploadlabel">Upload Picture</label>

的CSS

#Image {
  background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
  border-radius: 200px;
  width: 200px;
  height: 200px;
  background-size: 240px;
  display: block;
  margin: 0 auto;
  outline: none;
  border:none;
  border-radius: none; }

最佳答案

没有src时出现的细边框是因为chrome显示实际上您定义的空间中没有图像。 （感谢@Patrick Mlr指出来。）

#Image {
  background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
  border-radius: 200px;
  background-size: 240px;
  display: block;
  margin: 0 auto;
  width:0px;
  height:0px;
  padding: 100px;
  outline: none;
  border-style: none;
  border-radius: none; }

<div id="picture">
<input type='file' id="input">
<img [src]="url" id="Image">
<label for="uploadinput" id="uploadlabel">Upload Picture</label>

关于html - 如何消除图像周围的方形边框？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43369333/