关于图片img的width和height的一些心得

编辑：狂族晨曦 来源：经验杂笔 日期：2016-04-03 阅读： 3,584 次 抢个沙发 百度已收录

成都航院计算机工程系教过先森网页样式代码CSS，但是正如先森对大学的领悟“大学是一个真正让你体会什么叫做‘师傅领进门 修行靠个人’的地方”一样，老师教的毕竟是基础，不可能面面俱到。实践出真理，先森渐渐也摸索出了一些对于网站上图片的宽width和高height的一些心得。

先森的网站上用的是百度UEditor编辑器，先森一直觉得这个编辑器很好用，但是还是有些小毛病，需要我们自行改造插件。其中一个问题，就是UEditor在上传图片的时候，会设置两个图片的宽高属性：

<img width="***" height="***" style=="width=***px;height=***px;" />

这样看着是没有什么问题的，但实际使用起来却产生了在移动端图片无法自适应的问题：高度操持不变，宽度自适应。这就导致了图片拉伸。先森当初也是到处寻求帮助，最终自己检查出来的。

图片被拉伸

当然，这最终被先森解决了。关于更多百度UEditor编辑器的内容，先森也为大家分享了：

• 百度UEditor编辑器插件1.4.3.1 For WordPress

• 解决使用百度UEditor编辑器后移动端图片被拉伸问题

• 解决百度UEditor编辑器上传的图片无法被七牛CDN自动缓存问题

• WordPress百度UEditor编辑器自动添加七牛云储存裁剪代码

好了，上面说多了。其实本文中主要说的不是后面的style中的宽高，而是前面的img标签中的宽高。

这个宽高之前先森是没有怎么注意的，认为先森已经在CSS中设置了图片的宽高，这个宽高就没必要设置了。相信很多站长和先森的想法是一样的。但是先森看了露兜的一篇文章之后改变了这个看法。

童鞋们可以先去看看w3school中对img标签的说明：

• HTML <img> 标签的 height 和 width 属性

w3school详细介绍了img标签中width和height两个属性的重要性。先森看中的其实是露兜文章中一个评论的解释。关于这篇文章，大家也可以去看看，露兜大大也对这条评论做了着重推荐：

• WordPress 自动去除img的width和height属性

而先森看中的评论内容则如下，是一个ID为“于江水”的哥们写的：

“这样做从前端的角度来说是不合理的。

img 的 alt 属性是必须的，width 和 height 是推荐的。因为 img 在网页的加载是要比 div 这些结构慢的，所以往往是结构和文字先加载了，再加载的图片。这时候，由于浏览器预先不知道图片的尺寸大小，所以无法渲染图片在网页中的位置和尺寸。等图片加载进来之后，再进行渲染，这时候就产生重绘（就是浏览器重新计算相关元素的位置，具体表现就是图片出现了，图片下面的文字跑到下面了，淘宝的商品介绍页面，这里非常明显。）

而带有 width 和 height 的 img，浏览器会计算出来，留空，然后等待图片加载，避免页面重绘，提高前端性能和用户体验，这里在知乎上多图的答案可以看出来。

那么回到露兜大大在乎的响应式的图片处理。这里应该对 img 设置 max-width: 100%; height: auto; 这两条属性，才可以保证成比例拉伸。”

总结起来也就是设置了width和height两个属性后，浏览器会给没加载出来的图片留出应有的位置。初看这个观点的时候，先森虽然知道了，但也没有重视。所以，也就在网站改版的时候没给图片加width和height两个属性。

先森在改版后，又加入了CDN，在GTmetrix测试网站的时候，结果第一条优化建议就是给图片指定尺寸（点击放大）：

GTmetrix测评优化

而且先森这一点的得分是0分，是在有点郁闷，看来图片width和height两个属性真的很重要。所以建议大家上该设置的还是设置上。至于设置的方法，可以参考上面给露兜大大留评论的那位仁兄的方法：

max-width: 100%; height: auto;