问题描述
我很高兴 WP 4.4 。配有内置响应图像功能。但我并不满足于此。
我已经在 functions.php
中设置了一些自定义的图像大小:
add_image_size('post-thumbnails', 600, 600, true);
add_image_size('news-large', 1024, false);
add_image_size('news-small', 500, false);
add_image_size('3-col', 500, 375, true);
add_image_size('presscutting', 600, 850, true);
add_image_size('medium-large', 768, false); // just added today for devices support
add_image_size('full-feature-image', 2000, false);
add_image_size('gallery-image', 800, 600, true);
据我所知,未裁剪的图像 (裁剪设置为 false
) 被添加到 srcset
。图像在前端输出,如 (换行符,以便更好的可读性):
<img width="2000" height="1335"
src="http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg"
class="attachment-full-feature-image size-full-feature-image"
alt="asdf"
srcset="
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-300x200.jpg 300w,
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-768x513.jpg 768w,
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-1024x683.jpg 1024w,
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-500x334.jpg 500w"
sizes="(max-width: 2000px) 100vw, 2000px">
但现在我的问题:在我的屏幕上,只显示 1024px 宽度指定的图像,尽管它具有 1600 像素的屏幕分辨率。所以所有的图像看起来模糊。
如何使 WP 和/或浏览器使用 2kpx 图像?我必须添加新的图像大小,让我们说 1280px,1440px,1600px,1968px?还是有一个更简单的方式告诉 WP /浏览器使用较大的图像,而不是显示模糊和方式太小的版本?
最佳解决方案
关于文档,在博客上有这篇博文:
Responsive Images in WordPress 4.4
要提高评论中提到的 1600px 限制,请尝试:
add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
return 2000;
}, 10, 2);
最后,如上所述,您应该将您的电话修复到 add_image_size
add_image_size(‘news-large’, 1024, false);
需要是
add_image_size('news-large', 1024, 0, false);
参考文献
注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。