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

css設置圖片布滿

黃文隆2年前8瀏覽0評論

CSS設置圖片布滿,可以實現圖片自適應瀏覽器窗口大小,是Web開發中經常用到的技巧。下面介紹兩種實現方式。

/* 第一種實現方式 - 使用background-image屬性 */
.background-image {
background-image: url(圖片地址);
background-repeat: no-repeat; /* 去掉平鋪 */
background-size: cover; /* 圖片尺寸自適應 */
background-position: center; /* 圖片居中 */
}
/* 第二種實現方式 - 使用img標簽 */
.img-cover {
display: block; /* 將img標簽轉化為塊級元素 */
width: 100%; /* 圖片寬度占滿父元素 */
height: auto; /* 利用寬度自適應高度 */
object-fit: cover; /* 圖片尺寸自適應 */
}

第一種實現方式使用background-image屬性,將圖片作為背景顯示,通過background-size屬性實現尺寸自適應,但需要注意去掉background-repeat的平鋪效果,并通過background-position屬性將圖片居中顯示。

第二種實現方式則直接在img標簽上添加樣式,將圖片寬度占滿父元素,利用width:auto實現高度自適應,然后利用object-fit屬性實現尺寸自適應。需要注意將img標簽轉化為塊級元素。