CSS中,圖片的填充通常是用background-image屬性來實現(xiàn),但有時候我們需要把圖片放在img標簽里,并讓它自動填充滿整個容器盒子。這時候我們可以用CSS的背景位置和尺寸屬性來實現(xiàn)。
.box { width: 300px; height: 200px; position: relative; overflow: hidden; } .box img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; }
以上代碼中,我們首先定義.box為一個容器盒子,設置它的寬度和高度,overflow屬性為hidden,讓它隱藏盒子中超出部分的內容。然后為img標簽設置position為absolute,讓它脫離文檔流,top和left為50%,讓它在盒子中垂直和水平居中。接下來使用transform屬性,將img標簽向上向左偏移50%的距離,達到讓它在盒子中居中的效果。最后通過設置min-width和min-height為100%來讓圖片自適應盒子,并實現(xiàn)自動填充整個盒子的效果。
要讓以上代碼生效,還需要給img標簽設置src屬性,引入圖片。如果圖片比容器盒子大,圖片會自動調整尺寸,保證圖片填滿整個容器盒子。如果圖片比容器盒子小,圖片也會自動調整尺寸,以達到填滿整個容器盒子的效果。
上一篇vue權限路由控制