也是刚刚在发布新文章时候遇到的问题:现在大多数Wordpress的主题基本都是响应式布局,文章的模块、菜单、内容排版都能够根据浏览设备的大小进行自适应,但是刚才在文章中插入图片就发现,图片个尺寸超出了文章的页面范围,于是就想办法让图片也能自适应。

先分享一下露兜的方法:当访客使用手机访问时,自动删除文章内容中图片的width和height属性,以达到自适应的效果。如,在桌面设备上,图片使用的是以下的HTML代码:

在移动设备端,因为屏幕都比较小,如果要让图片自适应屏幕,我们应当把width和height属性去除,不然图片可能会比屏幕大:

为了实现这样的功能,露兜在主题functions.php中加入代码:

当然出于前端开发的合理性,也有不少评论者提出了疑问,我也尝试了以上方法,确实成功地去除了width和height标签,并且在部分浏览器中表现良好,图片实现了自适应。但是,在ie中还是出现了不适应的情况。

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

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

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

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

综合了上面的评论,我改为在style.css中加入如下代码:

当然,这么设置也会达到比较蛋疼的情况,如果你的图片上传的尺寸太小,就会被强行放大来适应屏幕导致图片失真模糊。不过,一般来说上传的照片都是过大需要调整,没遇到太小的问题,所以就到此为止拉。

 

You Might Also Like

  • CK 2016-01-12 at 18:47

    這文章值得收起研究,謝謝! 😉

    • AARON 2016-01-12 at 22:53

      @CK 欢迎交流!

  • 黑暗游侠 2016-02-29 at 15:32

    最好弄成max-width:100%

    • AARON 2016-03-03 at 18:27

      @黑暗游侠 是的,不然就会变成文章内的所有图片都完全占满整个宽度了。