css - 关于 .well 类中 Bootstrap 图像绝对位置的问题

Question

我正在尝试将具有绝对位置的图像放入 .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 类的属性，但两者都没有通过。

Answer 1

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

使用最大宽度是一件好事。

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

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

希望我已经向您解释了一下。