這個博客是基於“Pelican+Markdown+定制的my-gum主題”的。定制的主題將博文正文頁面的 右邊欄去掉，這導致在Firefox等瀏覽器中，正文中大的圖片會突破正文塊的寬度，高度也得不到限制，顯示效果非常差。
其原因是：Markdown的圖片區塊元素渲染成HTML元素的結果為 -
<p>
<img src="/path/to/img.jpg" alt="Alt text"></img>
</p>
<p>元素內的元素是行內(inline)元素。主題my-gum使用的CSS框架gumby對img元素是使用max-width: 100%將圖片的最大寬度限制為父元素的寬度。但在Firefox中max-width對於行內元素並不會生效(all elements but non-replaced inline elements, table rows, and row groups)，所以造成了顯示問題。
網絡上有人說可以用width: 100%替代之，但width: 100%和max-width: 100%的區別是：width: 100%是將所有指定元素的寬度 拉伸或收縮到和父元素的寬度一致，而max-width: 100%則是如果指定元素的寬度不超過父元素的寬度，則大小不變，如果超過了父元素的寬度，則將寬度收縮為父元素的寬度。如果使用width: 100%，那么我博文中的圖片，即使再小，都會被拉伸為正文的寬度，自然是不會好看的。
我的想法是：既然使用CSS不能解決這個問題，那就嘗試使用Javascript。當圖片加載完畢后，將圖片寬度與正文寬度做比較，如果 圖片寬度大於正文寬度，則為該圖片設置width: 100%。唯一不完美的地方是某些大圖片加載完畢之前的寬度很大，比較難看。
代碼如下所示：
$(function() { var entryContentWidth = $('.row').width(); $('.entry-content img').on('load', function(){ if($(this).width() > entryContentWidth) { $(this).width('100%'); } }); });
補充一個地址：說的比較簡潔：http://segmentfault.com/q/1010000002424935