引导缩略图容器图像内的绝对位置图像答案

【问题标题】：absolute position image inside bootstrap thumbnail container image引导缩略图容器图像内的绝对位置图像
【发布时间】：2015-12-01 14:36:57
【问题描述】：

我正在处理引导缩略图容器图像，我需要将产品的价格定位在图像的右下角。但是，当图像大小小于容器大小时，我使用的方法似乎失败了。

当前相对于最外层 div 的绝对定位。但是，我想要相对于图像的绝对定位。

注意：它是一个响应式缩略图 div，具有固定大小的图像。

.img-holder {
  position: relative;
}

.price-container {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: red;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="img-holder">
        <img src="http://dummyimage.com/330x200/000/fff" alt="...">
        <div class="price-container">
          USD 5.00
        </div>
      </div>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>

【问题讨论】：

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

尝试将display: inline-block 添加到img-holder

.thumbnail {
   text-align: center;
 }

.img-holder {
  position: relative;
  display: inline-block;
  text-align: center;
}

.img-holder img {
  max-width: 100%;
}

.price-container {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: red;
}

.caption {
  text-align: left;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="img-holder">
        <img src="http://dummyimage.com/330x200/000/fff" alt="...">
        <div class="price-container">
          USD 5.00
        </div>
      </div>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>

【讨论】：

它可以工作，但之后很少出现错误。第一个是图像没有居中，第二个是图像宽度大于容器宽度时图像大小不适合容器
@stackdisplay 更新了我的答案，看看是否有帮助。