如何摆脱图像周围的方形边框？

Question

我的图像是圆形的，但如何摆脱方形边缘/边框？

HTML

<SearchView

CSS

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

Answer 1

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

＆＃13;

＆＃13;

#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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过修改颜色，您可以更改边框宽度

{ border-width: 1px; border-color: rgb(160,160,255); }

Answer 3

尝试删除#picture上的边框：

#picture{
   border:none;
}

Answer 4

试试这个：

#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:0;
  border-radius: none;
}