CSS中可以使用object-fit
屬性來控制圖片的大小和形狀,從而實現(xiàn)將圖片多余的部分隱藏,該屬性可以指定圖片如何適應(yīng)其容器的大小,
img { width: 100px; height: 100px; object-fit: cover; }
在上面的代碼中,img
元素的寬度和高度都設(shè)置為100像素,并使用object-fit: cover;
縮放以適應(yīng)其容器的大小,如果圖片的尺寸大于容器的大小,那么圖片的多余部分就會被裁剪并隱藏。
CSS中還有clip-path
屬性可以用來裁剪圖片的形狀,通過定義裁剪路徑,可以隱藏圖片的多余部分,
img { width: 100px; height: 100px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
在上面的代碼中,img
元素的寬度和高度都設(shè)置為100像素,并使用clip-path
屬性定義了裁剪路徑,該路徑將圖片裁剪成一個多邊形形狀,從而隱藏了圖片的多余部分。
需要注意的是,object-fit
和clip-path
屬性在不同的瀏覽器中有不同的支持程度,在使用這些屬性時,需要確保目標瀏覽器支持它們。