CSS是我們網頁設計中必不可少的一部分,其中的圖片填充也是一個基礎而又重要的問題。這里我們討論一種解決方案,使得圖片填充頁面時不會發生拉伸的情況。
img { max-width: 100%; height: auto; }
這個解決方案的核心就是利用了CSS3中新增的max-width屬性。我們首先設置圖片的最大寬度為100%。這樣就可以保證圖片不會超過其所在容器的最大寬度。而這個時候,圖片的高度會根據比例自動調整。
這種方法的優點在于它的兼容性非常好,幾乎所有的瀏覽器均支持。而且這種解決方案還可以用在其他類型的元素上,例如video、iframe等。
需要注意的是,這種方案對于一些特定的情況并不是最佳選擇。例如一些需要非常精準計算圖片大小的情況下,可能需要其他一些更加靈活的解決方案。