CSS 圖片引用

CSS(Cascading Style Sheets)是一種用于樣式表控制網頁元素的樣式語言。在網頁中，使用圖片是一種常見的做法，但是如何在網頁中引用圖片呢？這里，我們將介紹CSS圖片引用的幾種方式。

width: 100px;

height: 100px;

object-fit: contain;

上面的代碼使用了`object-fit`屬性，將圖片設置為寬高均為100像素，并將其壓縮成一個內聯圖片，使其可以嵌套在其他元素的內部。

二、使用絕對定位和偽元素

使用絕對定位和偽元素可以創建一種特殊的圖片，這種圖片可以在網頁的不同位置出現。例如，可以使用以下代碼將一張圖片絕對定位到網頁的頂部：

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

上面的代碼使用了`position`屬性，將圖片設置為絕對定位，并將其放置在網頁的頂部。同時，使用`top`和`left`屬性指定圖片的位置。

三、使用CSS媒體查詢

使用CSS媒體查詢可以控制圖片在何時加載。例如，使用以下CSS媒體查詢可以控制圖片在網頁加載完成后加載：

@media screen and (max-width: 800px) {

width: 100%;

height: auto;

}

上面的代碼使用了`max-width`屬性，將圖片的寬度設置為100%，并將其高度設置為自動。當屏幕寬度小于800像素時，圖片將加載完全部內容。