Css 如何将缩放图标覆盖在图像上并始终保持它们完美对齐？

这让我发疯，因为我知道有办法做到，我只是不知道怎么做。以下是我提出的问题的复制品：

玩窗口宽度，看看会发生什么。我如何才能让加号图标保持在正确的位置，即使图像每行堆叠一个而不是每行堆叠三个

HTML:

只要加上col-md，只要它等于12，你更喜欢什么。。可能col-md-8和col-md-4等同于col-md-12

绝对定位项目需要一个位置为“相对”的父项

您的图像需要有

.img responsive

类，但如果使用

.container fluid

，图像也必须非常大。在本例中，我使用

.container

图像周围的div（保持图标位置的元素）不是图像的大小，除非该div是浮动的或内联块，然后您需要对此进行调整（如有必要）（img宽度调整为最大宽度）

在大多数情况下，您不需要

.col-X-12

。低于使用的最后一列类别的任何内容都将是100%

HTML:

  <div class="container">
     <div class="row product-row">
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
     </div>
  </div>

---

什么是正确的点？这很酷，但我真的不想像那样展开图像。基本上，我有一个带有产品网格的产品页面，根据浏览器的宽度，这些产品将彼此隔开（因为它们的内容居中）。PS：我编辑了我的原始代码，并将

位置：相对
添加到
。product
。不幸的是，它没有修复它。是的，所以你读了#3。。。除非其.inline块或浮动，否则图像周围的div与图像大小不同，所以您可以这样做：您是最伟大的！！非常感谢。
.zoom-btn {
  font-size: 2rem;
  position: absolute;
  top: 5px;
  right: 45px;
}

<div class="col-sm-12 col-md-4">
  <div class="product text-center">
      <div class="col-sm-9">
        <img src="http://placehold.it/300x300">
      </div>
      <div class="col-sm-3">
        <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
      </div>
  </div>
</div>

  <div class="container">
     <div class="row product-row">
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
        <div class="col-md-4">
           <div class="product text-center">
              <img src="http://placehold.it/500" class="img-responsive">
              <span class="glyphicon glyphicon-plus-sign zoom-btn"></span>
           </div>
        </div>
     </div>
  </div>

.product {
    position: relative
}
.zoom-btn {
    font-size: 2rem;
    position: absolute;
    top: 5px;
    right: 5px;
}
@media (max-width:991px) { 
    .product-row {
        text-align: center
    }
    .product {
        display: inline-block;
        clear: both;
        margin: 0 auto 10px;
    }
    .product img {
      width:100%;
    }
}