css - 如何在图像上叠加缩放图标并始终保持它们完美对齐？

Question

这让我发疯，因为我知道有办法做到这一点，但我只是不知道如何做。这是我提出的作为我遇到的问题的复制:

http://jsbin.com/yikuda

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

HTML:

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

CSS:

.zoom-btn {
  font-size: 2rem;
  position: absolute;
  top: 5px;
  right: 45px;
}

Answer 1

演示:https://jsbin.com/vavabe/1

1. 您的绝对定位项需要具有position:relative 的父项。
2. 您的图像需要具有 .img-responsive 类，但如果您使用 .container-fluid，它也必须非常大。我在此示例中使用 .container。
3. 图像周围的 div(将图标保持在适当位置的元素)不是图像的大小，除非该 div 是 float 的或内联 block ，然后您需要根据需要进行调整(使用 img 宽度调整最大宽度)。
4. 在大多数情况下，您不需要 .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>

CSS

.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%;
    }
}