width:100% 和 max-width:100%; 有区别吗【转藏】

 

这个博客是基于“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- 100%将图片的最大宽度限制为父元素的宽度。但在Firefox中max-width对于行内元素并不会生效(all elements but non-replaced inline elements, table rows, and row groups)，所以造成了显示问题。

网络上有人说可以用 100%替代之，但 100%和max- 100%的区别是： 100%是将所有指定元素的宽度 拉伸或收缩到和父元素的宽度一致，而max- 100%则是如果指定元素的宽度不超过父元素的宽度，则大小不变，如果超过了父元素的宽度，则将宽度收缩为父元素的宽度。如果使用 100%，那么我博文中的图片，即使再小，都会被拉伸为正文的宽度，自然是不会好看的。

我的想法是：既然使用CSS不能解决这个问题，那就尝试使用Javascript。当图片加载完毕后，将图片宽度与正文宽度做比较，如果 图片宽度大于正文宽度，则为该图片设置 100%。唯一不完美的地方是某些大图片加载完毕之前的宽度很大，比较难看。

代码如下所示：

$(function() {
var entryContentWidth = $('.row').width();

$('.entry-content img').on('load', function(){
if($(this).width() > entryContentWidth) {
$(this).width('100%');
}
});
});

 补充一个地址：说的比较简洁：http://segmentfault.com/q/1010000002424935

 原文地址：http://www.udpwork.com/item/12188.html