CSS中可以使用object-fit
屬性來設置圖片的填充方式,從而實現(xiàn)圖片的局部顯示,該屬性接受以下幾個值:
fill
默認值,圖片會被拉伸或壓縮以填充其包含元素的整個內(nèi)容區(qū)域。
contain
圖片會被縮放以保持其原始縱橫比,同時填充包含元素的***小矩形區(qū)域。
cover
圖片會被縮放并保持其原始縱橫比,同時填充包含元素的***大矩形區(qū)域。
none
圖片不會被改變,原始大小顯示。
如果你想要顯示圖片的左上角部分,可以使用以下CSS代碼:
img { object-fit: contain; position: absolute; top: 0; left: 0; }
這段代碼會將圖片縮放并保持其原始縱橫比,同時填充包含元素的***小矩形區(qū)域,然后將圖片定位在包含元素的左上角。
如果你想要顯示圖片的其他部分,可以通過調(diào)整position
屬性中的top
、left
、right
和bottom
值來實現(xiàn),如果你想要顯示圖片的右下角部分,可以使用以下CSS代碼:
img { object-fit: contain; position: absolute; right: 0; bottom: 0; }
這段代碼會將圖片縮放并保持其原始縱橫比,同時填充包含元素的***大矩形區(qū)域,然后將圖片定位在包含元素的右下角。