CSS框模型定義了元素的寬度和高度如何計(jì)算，為了自適應(yīng)不同的屏幕尺寸，我們會(huì)使用“百分比”設(shè)置元素的寬度或高度，但是有時(shí)候會(huì)出現(xiàn)不按比例縮小的問(wèn)題，這就是CSS不按比例縮小的情況。

例子：

上面的代碼中，我們將圖片的寬度設(shè)置為50%。然后發(fā)現(xiàn)，當(dāng)屏幕縮小時(shí)，圖片不按比例縮小，導(dǎo)致它看起來(lái)很奇怪。原因是圖片的高度是“自適應(yīng)”的，而且圖片在縮小時(shí)沒有保持原有的寬高比。

這個(gè)問(wèn)題可以通過(guò)設(shè)置一個(gè)固定的高度來(lái)解決，比如：

例子：

在這個(gè)例子中，我們將圖片的高度設(shè)置為200像素，因此縮小的時(shí)候圖片會(huì)按比例縮小并保持原有的寬高比。在實(shí)際開發(fā)中，我們需要根據(jù)具體情況選擇適合的解決方案，以確保圖片和其他元素在縮小時(shí)都能按比例縮小，并且布局不會(huì)出現(xiàn)問(wèn)題。