出于明显的页面大小原因,我试图开始使用Wordpress的响应式图像功能,但是在正确返回sizes
属性以告知浏览器要加载哪些图像方面有些麻烦。我已经成功更新了整个网站的图片大小,只剩下5个大小(9999px用于避免高度裁剪):
thumbnail
= 414x9999px medium
= 1024x9999px medium_large
= 768pxx9999px large
= 1440x9999px 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
图片,依此类推。
我已经在线上学习了一些教程,但都没有成功,但是在全球范围内输出应该看起来很简单吗?任何指针将不胜感激。