當我們在使用CSS時，有時會發現圖片在頁面中上下跳動的問題。這種現象十分影響頁面的美觀度和用戶體驗。那么，這個問題產生的原因是什么呢？

img {
display: block;
margin: 0 auto;
}

當我們在使用以上代碼對圖片進行樣式設置時，圖片會自動居中，但是它也會受到外部元素的影響。當圖片加載完成前，外部元素的高度會受到圖片的影響而自適應，導致頁面的高度不穩定，產生圖片上下跳動的現象。

那么，有什么好的解決方案呢？以下兩種做法將會幫助你解決這個問題。

一種方法是在圖片未加載完成前，給它設置一個占位符。具體實現方法如下：

.img-container {
position: relative;
width: 100%;
padding-bottom: 60%;
/* 16:9 比例 */
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

以上代碼中，.img-container為圖片的父元素，首先設置了一個padding-bottom，這樣就達到了高度自適應的目的。然后，讓圖片覆蓋整個父元素，利用object-fit: cover讓圖片等比例縮放，依然能保持居中顯示，這樣就解決了圖片上下跳動的問題了。

另一種方法則是通過JavaScript實現的。在圖片加載完成后取得圖片的高度，然后動態地設置圖片容器的高度以達到高度自適應的效果。

$(function() {
var imgObj = new Image();
var imgSrc = 'http://example.com/img.jpg';
imgObj.src = imgSrc;
imgObj.onload = function () {
var imgHeight = imgObj.height;
$('.img-container').height(imgHeight);
}
});

以上代碼中，我們首先創建了一個新的Image對象，指定圖片的路徑，然后在圖片加載完成后，取得了圖片的高度，并將該高度賦值給圖片容器。這樣就能達到圖片居中，高度自適應的效果了。