.well类中Bootstrap Image Position Absolute的问题

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

正如您所看到的，我无法将位置属性更改为“相对”。我还尝试添加一个高度：auto;属于.well类的财产，但它没有通过。

Answer 1

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

最大宽度是一件好事。

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

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

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