0

I am trying to put an image with absolute position inside a .well div. I have to keep the image position absolute as I would like to create a responsive image using following CSS format. But the image appears out of the div scope.Here are my code for html and 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%;
}

As you can see I cant change the position property to 'relative'. I also tried to add a height:auto; property to .well class but it didn't go through neither.

4

1 回答 1

0

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

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

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

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

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

于 2013-06-14T00:02:18.077 回答