用CSS如何控制網頁中圖片自適應大小?

來源:互聯網
上載者:User
css|控制|網頁|自適應

  圖片自動適應大小是一個非常常用的功能,在進行製作的時候為了防止圖片撐開容器而對圖片的尺寸進行必要的控制,我們可不可以用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; 超出的部分隱藏,避免控製圖片大小失敗而引起的撐開變形。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.