[CSS] 控制過寬圖片

在別人的網誌中
常常看到插入大張的圖片版面就被破壞了
例如超出內文欄位


(上圖的內文圖片超出框線)
更誇張連旁邊的導覽列都被擠到最下面去了


(上圖示正常的版面 左邊是內文 右邊是導覽列)


(上圖是被破壞的版面 左邊內文裡面的圖片太大張 把右邊的導覽列擠到最下面去了)

或許設計的人會說：「這個只要把圖片縮小一下就好了，很簡單。」

話雖這麼說
但我們總是在找更省事的方法
於是可以在CSS的樣式中加入這段

img { width: 300px; }

這段語法能將大於300px的圖片
自動等比例的縮成300px
使我的圖片不會超過內文的欄位
不過有個缺點
就是小於300px的圖片
會被強制例放大

另外還有一種選擇

img { max-width: 450px; }

IE 不支援
FireFox 會等比例縮小
Safari 2 不會等比例縮小


(上圖 FireFox能將大於450px的圖片等比例縮小)


(上圖 Safari 將大於450px的圖片，把寬縮小成450px，而高度不變。圖片會變形)

使用 Flock 撰寫