CSS圖片隱藏過高部分旨在讓圖片高度超過父元素時能夠自動裁剪掉超出的部分,使得圖片能夠在其所在元素中完全展現。實現此功能需要用到CSS的overflow和clip兩個屬性。
img { overflow: hidden; /* 超出部分隱藏 */ height: 150px; /* 規定高度為150px */ width: auto; /* 寬度自適應 */ display: block; /* 轉換為塊級元素 */ margin: 0 auto; /* 居中顯示 */ clip: rect(0px, auto, 150px, auto); /* 裁剪掉超出部分 */ }
在這段代碼中,overflow屬性值為hidden,即超出部分隱藏。height屬性用于設定圖片高度,同時寬度采用自適應模式(width: auto)。display屬性用于將圖片轉換為塊級元素(block),這樣可以讓margin屬性起效果。margin屬性值的設置可以讓圖片水平居中顯示。最后的clip屬性用于設定裁剪區域,rect()函數中四個參數分別為(上、右、下、左)邊距。這里我們設定了上邊距(也就是超出部分)為0px,下邊距為150px(圖片高度),其他兩個值為auto(自適應)。
需要注意的是,使用此方法時必須為img元素指定固定的高度,且父元素不能有padding或border等屬性,否則裁剪會產生錯誤。另外,此方法僅適用于以img元素展示圖片的情況,對于以背景圖片方式展現的情況需要采用不同的方法。
上一篇css圖標跟字對齊
下一篇mysql數據庫監控腳本