CSS圖片溢出是指當一張圖片的尺寸大于其容器元素尺寸時,圖片將會超出容器元素的邊界,而超出的部分將不可見。下面將介紹如何使用CSS來隱藏這部分溢出的內容。
img { max-width: 100%; height: auto; overflow: hidden; }
以上代碼中,我們通過設置圖片的最大寬度為100%來保證圖片能夠自適應其所在的容器寬度,同時通過設置高度為auto來保持圖片的寬高比例不變。但僅僅這樣設置還無法隱藏溢出內容,需要使用overflow屬性來實現(xiàn),將其值設置為hidden即可。
當然,也可以通過設置容器元素的寬高、定位等屬性來實現(xiàn)圖片溢出的隱藏,比如使用relative定位屬性、設置容器元素的padding、margin等,都可以達到效果。不過以上是最簡單、最常用的方法。