Font Awesome图标增加div大小

Question

我有以下HTML代码：

<div _ngcontent-c1="" class="attach">
   <div _ngcontent-c1="" class="image">
      <img _ngcontent-c1="" id="0" src="...">
    </div>
    <i _ngcontent-c1="" class="fa fa-trash"></i>
</div>

使用以下scss：

.attach {
  display: inline-block;
 i {
    position: relative;
    right: 50%;
    opacity: 0;
    z-index: 2;
    padding: .5em;
    color: #efefef;
    background: gray;
    border-radius: 3em;
   }
  .image {
     display: inline-block;
   }
  img {
     z-index: 1;
     border-radius: 1em;
     width: 100px;
     height: 100px;
    }
 }
.attach:hover {
 cursor: pointer;
 filter: brightness(80%);
  i {
    opacity: 1;
  }
}

问题是，类attach的div的大小正在增加

那么，我怎么能避免增加div的大小呢？

Answer 1

如果有人有同样的错误，我解决了它将图像作为div的background-image，以及以下规则：

background-size: cover;
width: 100px;
height: 100px;
text-align: center;

然后，只需使用position: relative和正确的百分比将div中间的字体真棒图标居中。