Question

我有一个带有图像的div，图像对于div来说太大了。我用明显的CSS溢出解决了溢出问题：隐藏的技巧。

但问题是，当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

Answer 2

首先，尝试将父宽度/高度设置为像素，而不是pct。

此外，隐藏在父级上的溢出不会产生预期效果吗？

Answer 3

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

Answer 4

如果您将图像设为image-holder的背景图像，则无论相应div的宽度如何（假设已正确配置溢出和附件），它都应正确调整大小（

缩小div时隐藏溢出

4 个答案: