在頁面布局中，我們常常使用圖片來裝飾頁面并豐富內容。但是，圖片的寬度和高度會影響頁面的占位。當圖片還未加載時，頁面中可能會出現意想不到的布局效果。通過CSS的一些技巧，我們可以使圖片不影響占位，保持頁面的穩定性。

一種解決方案是使用CSS的background-image屬性。這種方法可以將圖片作為背景圖像，并設置元素的寬度和高度，使該元素保持穩定的占位。例如：

div {
background-image: url('example.png');
width: 200px;
height: 200px;
}

另一種方式是使用CSS的object-fit屬性。這個屬性能夠將圖片限制在其父元素的大小內，同時保持其寬高比。例如：

img {
object-fit: cover;
width: 200px;
height: 200px;
}

在HTML5中，還可以使用新的img屬性 - loading。loading屬性有三個值：auto、lazy和eager。其中，lazy是默認值，圖片將在頁面滾動到它們位置時才加載，這也意味著圖片將不會影響網頁的渲染和布局。例如：

img {
width: 200px;
height: 200px;
object-fit: cover;
loading: lazy;
}

在頁面布局中，選擇正確的方式來應用圖片是非常重要的。使用上述技巧，我們能夠避免頁面布局受到圖片影響而實現更好的用戶體驗。