.well 类中的引导图像位置绝对问题答案

【问题标题】：Issue on Bootstrap Image Position Absolute in .well Class.well 类中的引导图像位置绝对问题
【发布时间】：2013-06-10 08:05:04
【问题描述】：

我正在尝试将具有绝对位置的图像放入 .well div 中。我必须保持图像位置绝对，因为我想使用以下 CSS 格式创建响应式图像。但是图像出现在 div 范围之外。这是我的 html 和 css 代码

<div class="container">
  <div class="well">
      <img  class="img-polaroid" src="http://testimage.png" />
  </div>
</div>

.css

img{
     position: absolute;
     max-width: 80%;
     top: 10%;
     left: 10%;
}

如您所见，我无法将位置属性更改为“相对”。我还尝试添加一个 height:auto; .well 类的属性，但都没有通过。

【问题讨论】：

【解决方案1】：

为什么需要绝对定位，您使用的是相对于包含元素的相对单位的百分比。因此，因此，如果您的 <img> 标签在 div 内，那么它的百分比宽度或高度，假设 50% 将始终是 <div> 的高度或宽度的 50%（这是假设 <div> 是流动的） .

使用最大宽度是个好东西。

对于需要更精细调整的场景，另一种技术是计算图像的尺寸并将其与页面大小进行比较。假设图像为 500 X 100，页面宽度为 1200px 宽的文档。计算百分比为 (500 / 1200 ) × 100 = 41.66%

这就是为什么在 Bootstrap.css 文件中所有宽度都以百分比给出。

希望我已经向你解释了这一切。

【讨论】：