css 控制圖片大小小于固定值控制大小

2024-07-11 08:27:41

字體：大中小

來源：轉載

供稿：網友

今天在做CMS模板的時候，文章頁面需要這個代碼實現，找了一段，放在這里做備用。哈哈。
第一次找的這個不太行。
<A href="" target=_blank><IMG src="" onload="javascript:if(this.width>screen.width-500)this.width=screen.width-500"></A>
JS的風格，很討厭。
第二次找的不錯。可用。但是有些是CSS3里的，目前還支持的不太好，尤其對我這種還停留在IE6的用戶，一般做站基本在IE6和FireFox中通過，FireFox中不要有太大的變形即可，很討厭那個margin，IE和FF支持的值不同，很多時候就找別的辦法彌補。
圖片自動適應大小是一個非常常用的功能，在進行制作的時候為了防止圖片撐開容器而對圖片的尺寸進行必要的控制，我們可不可以用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; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開變形。

上一篇：CSS 各種濾鏡代碼解釋用法案例

下一篇：CSS Sprites 圓角制作教程