使溢出忽略特定的子元素

Question

我需要在頁面的頂部放置一個大封面圖像。它比我的960像素內容包裝更寬，所以我會把它放在外面，但我不希望它因爲寬度而導致頁面水平滾動。是否有一種確定的方法來讓容器在滾動時忽略特定的孩子？

我的第一個想法是將它作爲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;隱藏任何水平溢出（避免滾動條）。