由于更換了新的主題，頁(yè)面正文的寬度從 540px 縮到了 520px，導致原先一些日志中寬度大于 520px 的圖片會(huì )把頁(yè)面撐破，側邊欄掉到正文底下去，頁(yè)面布局亂得不堪入目。因此，需要讓這些超過(guò)限制寬度的圖片自動(dòng)縮小以適應當前頁(yè)面，我摸索了一些方法，寫(xiě)出來(lái)拋拋磚。
Firefox 的解決辦法
只需要修改 CSS 樣式表的一行代碼，給正文中的 img 加上 max-width 屬性：
max-width 屬性會(huì )自動(dòng)將正文中超過(guò)限寬的圖片成比例地縮小到 520px 寬度，方便快捷，在 Firefox 2 瀏覽器中測試通過(guò)。我沒(méi)有 Opera、Safari，但它們應該是支持 max-width 屬性的，聽(tīng)說(shuō) IE7 （可能）也支持該屬性，反正 IE6 是不行的，所以還得為 IE6 想專(zhuān)門(mén)的辦法。
IE6 的解決辦法
1. 使用帶有表達式的 CSS 樣式
這個(gè)方法看上去似乎是可以的，但我在測試時(shí)發(fā)現，寬度超過(guò) 520px 的圖片的確已經(jīng)縮小，但是后面出現的小圖片的寬度被放大到了 520px。我認為可能是頁(yè)面中一旦有圖片寬度超過(guò) 520px，width 屬性的值就會(huì )固定為 520px，導致出現剛才說(shuō)的問(wèn)題。這個(gè)方法出自這里，大家研究一下，看是不是我用錯了。
2. 使用 JavaScript 調整
其實(shí)最初我就想到 JavaScript，但腳本只能在頁(yè)面裝載完成之后執行，網(wǎng)絡(luò )狀況不太好的話(huà)，需要加載很長(cháng)一段時(shí)間才能輪到腳本執行，用戶(hù)體驗較差；另外，如果用戶(hù)關(guān)閉了瀏覽器的 JavaScript 支持，這個(gè)方法也就失效了。
<script type="text/javascript">
window.onload = function() {
for (var index = 0; index <document.images.length; index++) {
var maxWidth = 520;
if (document.images[index].width> maxWidth) {
document.images[index].width = maxWidth;
}
}
}
</script>
<![endif]-->
總結
一句話(huà)，希望 IE6 早日被淘汰！
