使溢出忽略特定的子元素

Question

我需要在页面顶部放置一个大封面图像。它比我的960px内容包装器宽，所以我将它放在那之外，但我不希望它导致页面由于其宽度而水平滚动。在滚动时，是否存在使容器忽略特定子项的既定方法？

我的第一个想法是使它成为宽度为100％的div的居中背景，但图像是动态的，不应由CSS指定。

Answer 1

您可以在图片上设置max-width:100%，如果它在完整尺寸下太大，则会将其缩小以适应（只需确保height未设置或auto）

或者，您可以使用背景图片，但外部CSS中的“图片”部分为none。然后，您src="path/to/image.png"中的<img />位置，而只是放style="background-image:url('path/to/image.png');"

Answer 2

您可以缩放图像以适合容器的宽度（max-width: 100%;），或者在图像的父元素上设置overflow-x: hidden;以隐藏任何水平溢出的内容（避免使用滚动条）。