CSS控制圖片使它自適應(yīng)大小代碼
http://www.hz8851.com | 時(shí)間:2010-05-28 | 關(guān)注人次[1019] | 字體設(shè)置:
大中小-
在進(jìn)行制作的時(shí)候?yàn)榱朔乐箞D片撐開(kāi)容器而對(duì)圖片的尺寸進(jìn)行必要的控制,我們可不可以用CSS控制圖片使它自適應(yīng)大小呢?
下面就為你提供兩種方法,我個(gè)人推薦第一種方法
方法一
CSS控制圖片大小代碼
<style type="text/css">
img {
border:0;
margin:0;
padding:0;
max-width:200px;
width:expression(this.width>200?"200px":this.width);
max-height:200px;
height:expression(this.height>200?"200px":this.height);
}
</style>
<body>
<img src="a.jpg" />
</body>
方法二
<style type="text/css">
div
{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
</style>
max-width:600px; 在IE7、FF等其他非IE瀏覽器下最大寬度為600px。但在IE6中無(wú)效。
width:600px; 在所有瀏覽器中圖片的大小為600px;>
當(dāng)圖片大小大于600px,自動(dòng)縮小為600px。在IE6中有效。
<img src="b.jpg" />
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶(hù)發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)
點(diǎn)擊舉報(bào)。