html中css設置圖片大小

html中css設置圖片大小

　　html中利用css能控制圖片大小，是個很方便的方法。下面由學習啦小編為大家整理了html用css設置圖片大小的相關知識，希望對大家有幫助!

　　html用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; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開變形。

　　html用css設置圖片大小方法二

　　css代碼如下：

　　img,a img{

　　border:0;

　　margin:0;

　　padding:0;

　　max-width:590px;

　　width:expression(this.width>590?"590px":this.width);

　　max-height:590px;

　　height:expression(this.height>590?"590px":this.height);

　　}

　　這樣當圖片的高度或寬度若超過590px，將會按比例壓縮成590px，如果不超過則按原大小顯示。