WordPress WP 4.4 。響應圖像瀏覽器選擇 「wrong」

問題描述

我很高興 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);

參考文獻

• WP 4.4. responsive images browser choosing the 「wrong」 one

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。