CSS自適應圖片是指在不同屏幕尺寸下圖片能夠自動調整大小,適應不同的設備。設置圖片寬度的方式有多種,這里介紹兩種常用的方法:
img { max-width: 100%; height: auto; }
上述代碼設置了圖片的最大寬度為父容器的100%,高度自動調整。這種方式的好處是保證圖片在任何尺寸屏幕上都能完全顯示,而不會因為圖片寬度超出而失真。同時,圖片的高度也能隨著寬度的變化而自動調整,不會出現變形的情況。
img { width: 100%; height: auto; }
這種方式比較適合在特定的頁面布局中使用,比如圖片要占滿整個區域。使用這個方法需要注意的是,如果圖片本身比容器寬度小,那么圖片會被拉伸以填滿整個區域,導致圖片失真。因此需要根據具體情況來選擇使用哪種方法。