當我們在使用CSS設置圖片高度時，有時會出現圖片變形的情況。這種情況的原因是圖片的寬高比例不匹配造成的。下面我們來看一個例子。
上面這個例子中，原尺寸圖片的寬高比例為3:2（寬度是高度的1.5倍），但是我們設置了高度為200px，導致圖片變形了。
要解決這個問題，我們需要保持原尺寸圖片的寬高比例?？梢酝ㄟ^以下兩種方式來實現：
方式一：設置寬度，讓高度自適應
在此例中，我們設置了寬度為300px，圖片的高度會根據寬高比例自適應調整，不會出現變形。
方式二：使用background-image屬性，在CSS中設置圖片的背景
在此例中，我們使用了
元素，并設置了其背景為原尺寸圖片。同時，使用了background-size屬性來控制背景圖片的尺寸，保持寬高比例。最后再將
的高度和寬度設置為需要的值即可。
通過以上兩種方式，我們能夠避免因設置高度而導致圖片變形的問題。
上一篇css圖片高度鋪滿
下一篇css圖片高度等于寬度