圆角不包含图像/ img / overflow：hidden;

Question

http://jsfiddle.net/sheriffderek/4JkkF/1/ ///新版小提琴///

请查看这个jsfiddle。

我无法将图像保存在各自带圆角的div的边框内。这真的很简单，直到我被要求将border-radius放在所有东西上......任何帮助都会非常感激......

对情况的进一步解释......

在每个“帖子”的CSM中填写字段......

一个用php作为标题，一个作为缩略图，一个作为描述，AND - 一个作为进入滑块的图像。 （img的列表）<img src="" alt="">'s等......

整个布局都是流动的 - 所以我需要将图像留在像div这样的“框架”之后......就像在css中的背景图像一样......并且改变尺寸而不会弄乱圆角...我可以通过设计img来做到这一点，但我只是因为某种原因而想到 - img所居住的div会决定外边缘......但是 - 到目前为止我错了......

Answer 1

当您指定border-radius时，内容会被“包裹”在边框内 - 因此div内的图像会被角落推动而不会被剪裁。您可以将图像用作background div来实现所需的行为。

一个小小的工作演示：little link。

我希望以任何方式提供帮助！

Answer 2

  

但我不明白为什么img首先出现在div中......

第一种情况下的图像本身比周围的div大。 但周围的div有溢出：隐藏加宽度＆amp;高度。

所以环绕div.thumbnail不会扩大..

我的建议是：

    <div class="thumbnail" style="height:50%;width:50%;position:static">
    <img src="http://derekthomaswood.com/place/blink3.gif" alt="" style="position:static; display: block;width:100%;height:100%">
</div>
<!-- of course adjusting the classes, not as inline css ;-) 
  resizing works over adjusting the div.thumbnails dimensions
-->

HTH Gekkstah