WordPress共振图像正确设置了“大小”属性

时间:2019-07-01 15:07:11

标签: wordpress responsive-images srcset

出于明显的页面大小原因,我试图开始使用Wordpress的响应式图像功能,但是在正确返回sizes属性以告知浏览器要加载哪些图像方面有些麻烦。我已经成功更新了整个网站的图片大小,只剩下5个大小(9999px用于避免高度裁剪):

  1. thumbnail = 414x9999px
  2. medium = 1024x9999px
  3. medium_large = 768pxx9999px
  4. large = 1440x9999px
  5. full =上传的原始大小

使用wp_get_attachment_image('image_id');时,这些内容在srcset中正确输出,但是我无法将sizes属性设置为匹配。当前的srcset输出是:

src="http://husk.local/wp-content/uploads/2019/06/Husk-072-414x276.jpg"
srcset="http://husk.local/wp-content/uploads/2019/06/Husk-072-414x276.jpg 414w,
http://husk.local/wp-content/uploads/2019/06/Husk-072-1024x682.jpg 1024w,
http://husk.local/wp-content/uploads/2019/06/Husk-072-768x512.jpg 768w,
http://husk.local/wp-content/uploads/2019/06/Husk-072-1440x960.jpg 1440w"

我保留了sizes="(max-width: 414px) 100vw, 414px"的默认Wordpress输出,但是我想告诉浏览器在特定视口大小(即视口414px宽)下获得thumbnail图像时获得特定图像,视口宽768像素,获取medium_large图片,依此类推。

我已经在线上学习了一些教程,但都没有成功,但是在全球范围内输出应该看起来很简单吗?任何指针将不胜感激。

0 个答案:

没有答案