css - 缩小 div 时 overflow hidden

Question

我有一个包含图像的 div，图像对于 div 来说太大了。我已经用明显的 CSS overflow:hidden trick 解决了溢出问题。

但是，问题是当 div 的父级调整大小(缩小)时，保存图像的 div 不会因为其中的图像而缩小。

有没有一种方法可以让可调整大小的 div 和其中的图像(几乎像背景图像)溢出？

我的 DIV 结构:

<div id="parent">
    <div id="image_holder">
        <!-- this image will inevitably be larger than its parent div -->
        <img src="too_big_for_div.jpg" /> 
    </div>
</div>

我的 CSS:

#parent { width:100%;}
#image_holder { width:100%; overflow:hidden;}

#image_holder div 现在不会调整为更小的尺寸。有什么想法吗？

Answer 1

我已经测试了您的代码，它确实调整了内部 div 的大小。要实际观察它，请尝试设置 image_holder 的 border 属性，并将父级的百分比宽度设置为较低的值，如下所示:

#image_holder { width:100%; overflow:hidden; border: 1px solid red;}
#parent { width:70%;}

如果您调整浏览器窗口的大小并且可以观察到最右边的边框，则表示您的 DIV 大小调整正常。也许还有其他问题。

如果您能提供更多信息，我很乐意提供帮助...

P.S.: 在 IE8, FF 3.6.3 中测试