手機圖片高度變形問題可以通過CSS來解決。假設(shè)我們要將一張寬為600像素、高為400像素的圖片在手機端呈現(xiàn)，但是如果直接按照圖片原始尺寸顯示，圖片會顯得特別大，而且還會變形。這時，我們可以使用CSS設(shè)置圖片的寬度為100%。

img {
width: 100%;
}

這樣一來，圖片就會根據(jù)手機屏幕的寬度自動縮放，不會出現(xiàn)變形的情況。但是，這樣做有一個問題，就是圖片的高度可能會變得很小，導致顯示效果不美觀。解決方法是設(shè)置圖片的最小高度為設(shè)備屏幕寬度的一半。

img {
width: 100%;
min-height: calc(50vw);
}

這樣設(shè)置后，無論在什么設(shè)備上，圖片的高度都會至少達到設(shè)備寬度的一半，圖片的比例也不會變形。當然，如果你想要圖片不拉伸變形，可以使用以下代碼

img {
width: 100%;
object-fit: cover;
}

這個CSS屬性可以讓圖片按原始比例縮放，并在容器中居中顯示，多余的部分會被裁剪。但是，這個屬性在一些老的手機瀏覽器中可能無法生效，需要注意。 綜上，通過CSS來解決手機圖片變形問題，可以讓我們的頁面顯示效果更加美觀，同時也更加符合用戶的使用體驗。