圖片自動適應大小是一個非常常用的功能,在進行制作的時候為了防止圖片撐開容器而對圖片的尺寸進行必要的控制,我們可不可以用CSS控制圖片使它自適應大小呢?
我們想到了一個比較簡單的解決方法,雖然不是非常的完美,如果您的要求不是非常高,已經可以滿足你的需要了。我們看下面的代碼:
div img {
max-width:600px;
width:600px;
width:expression(document.body.clIEntWidth>600?"600px":"auto");
overflow:hidden;
}
◎ max-width:600px; 在IE7、FF等其他非IE浏覽器下最大寬度為600px。但在IE6中無效。
◎ width:600px; 在所有浏覽器中圖片的大小為600px;
◎ 當圖片大小大於600px,自動縮小為600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隱藏,避免控制圖片大小失敗而引起的撐開變形。