2012年10月15日 星期一

CSS之按比例縮小圖片大小


CSS之按比例縮小圖片大小



用CSS達成這目的很簡單,只要你確定了你圖片所想要的寬度,接下來的事情就是把程式碼輸入到樣式表裡面這樣簡單而已

img {
max-width:550px;
height:inherit;
width:expression(document.body.clientWidth>550?"550px""auto");/*若圖片大於550px就調整*/
overflow:hidden;      /*超過不顯示*/
}
其中,max-width為圖片最大寬度,底下的數值皆以此為準修改就可以了~
20110129補充:
如果不考慮 IE 6 的話,expression 那行其實可以去掉
而且有那行的話,等於只要用 IE 看還是多了一行 JS ...XD


img{
max-width:590px;
width:expression(this.width>590?"590px":this.width);
max-height:590px;
height:expression(this.height>590?"590px":this.height);
}