首页 » 网站建设 »

WordPress对图片的裁剪功能与响应式图片

2017年2月13日 / 221次阅读
WordPress

打开支付宝首页,搜索“529018372”,即可领取红包!可重复领。

特色图片

WordPress现在支持响应式的图片,所谓响应式图片,其实就是在<img>标签里面,有一个srcset属性,这个属性将此图片的所有尺寸的版本呢都罗列出来,由浏览器在展现页面的时候,自行选择最符合窗口大小的图片来显示。比如,PC端的浏览器就选择大一些的图片,这样会有较好的效果,而移动端的浏览器就选择小一些尺寸的图片,这样既不影响效果,也加快页面加载速度。

 

下面这部分代码就是一个响应式图片的HTML代码:

<img class="pure-img wp-image-14356 size-large" src="http://www.maixj.net/wp-content/uploads/2014/09/she1-768x1024.jpg" alt="小蛇发现有人了,自己躲在厕所的角落里面。" width="768" height="1024" srcset="http://www.maixj.net/wp-content/uploads/2014/09/she1-768x1024.jpg 768w, http://www.maixj.net/wp-content/uploads/2014/09/she1-113x150.jpg 113w, http://www.maixj.net/wp-content/uploads/2014/09/she1-400x533.jpg 400w, http://www.maixj.net/wp-content/uploads/2014/09/she1.jpg 1536w" sizes="(max-width: 768px) 100vw, 768px">

 

本文想记录的是这样一个问题:

WordPress媒体库自带一个图片裁剪功能,如果你对网站上传的图片使用这个裁剪功能,那么,将失去响应式图片的效果,即使用裁剪之后的图片,网页图片将不再是响应式的。观察到裁剪功能使用之后,系统会自动生产一个新名称的图片,而这个图片只有一个尺寸的版本。要使用srcset功能,需要一张图片有多个尺寸版本。

麦新杰不能确定这是否是WordPress的一个bug,反正记住,不用WordPress自带的图片裁剪功能即可。

本文链接:http://www.maixj.net/wz/wordpress-tupian-14374
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

《WordPress对图片的裁剪功能与响应式图片》有2条评论

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.

  • 好吧 这个确实是一个好方法 但是直接设置图片100%宽度填充的话 那么图片就受宽度影响 就不用设置这个响应式了 [ ]

    • 响应式图片有不同尺寸在不同屏幕展现不同文件的好处,主要是移动端。 [ ]


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

Ctrl+D 收藏本页

栏目

AD

ppdai

©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top