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標簽轉化為塊級元素。
下一篇mysql基本鏈接