色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 圖片填充滿盒子

榮姿康1年前12瀏覽0評論

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屬性,引入圖片。如果圖片比容器盒子大,圖片會自動調整尺寸,保證圖片填滿整個容器盒子。如果圖片比容器盒子小,圖片也會自動調整尺寸,以達到填滿整個容器盒子的效果。