Wordpress 响应式图像 - 在视网膜屏幕上选择错误的图像

Question

我一直在努力尝试让响应式图像在我正在构建的这个网站上运行，当我认为它进展顺利时，我在 iPad 视网膜屏幕上查看它，它选择了错误的图像。它不仅尺寸错误，而且还显示为横向，而不是纵向。我不知道为什么要这样做，因为我已经为所有不同的屏幕尺寸创建了自定义图像尺寸，并且还创建了用于视网膜屏幕的 XL 版本。

这是带有 srcset 和尺寸的图像的 HTML。

<img class="scene_element scene_element--fadeinup" src="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg" 
srcset="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017.jpg 3684w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-768x1151.jpg 768w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1010x1514.jpg 1010w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg 505w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-415x622.jpg 415w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-720x1080.jpg 720w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-360x540.jpg 360w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-293x440.jpg 293w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1110x800.jpg 1110w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-455x306.jpg 455w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-355x238.jpg 355w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-640x600.jpg 640w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-320x300.jpg 320w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-2340x1258.jpg 2340w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1170x629.jpg 1170w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-940x627.jpg 940w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-555x400.jpg 555w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1910x1274.jpg 1910w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-955x637.jpg 955w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1574x1250.jpg 1574w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-787x625.jpg 787w" 


sizes="(-webkit-min-device-pixel-ratio: 1.5) 1010px, 
(max-width: 767px) 767px, (min-width: 768px) and (max-width: 991px) 415px, 
(min-width: 992px) and (max-width: 1199px) 415px, 
(min-width:1200px) 505px, 505px" itemprop="thumbnail" alt="Image description" >

由于视网膜屏幕是双像素，我首先尝试将其添加到针对 iPad 的尺寸，但没有任何反应：

(min-width: 2048px) 1010px 

有趣的是，我有一个尺寸为 1010 像素的图像，并指定了当它是使用该图像的两倍像素时的大小。相反，它使用这个尺寸：940x627.jpg

谁能解释一下为什么会这样？

Answer 1

正确的人，我设法找出为什么页面没有加载正确的图像。正如我在问题中提到的，默认情况下，Wordpress 只会加载 srcset 中具有相同纵横比的图像。如果您想包含具有不同比例的自定义图像大小，您需要通过 wp_calculate_image_srcset 函数添加它们。

这样做的问题是，所有自定义尺寸都将加载到每个图像 srcset 中，并且浏览器将根据最接近的宽度和比例选择图像。

其次，我意识到 Wordpress 基于宽高比的图像是原始图像大小，而不是您加载到页面中的自定义大小。所以我有自定义大小为add_image_size('portrait-case-study-lg', 505, 757, true); Wordpress 的肖像图像实际上是从原始文件中获取纵横比，即 2000px x 1500px。由于这具有不同的比例，我为纵向尺寸创建的图像尺寸被忽略，而是选择具有最接近纵横比的图像。

我解决这个问题的方法是删除函数wp_calculate_image_srcset，它将尺寸添加到 srcset 中，而是在 Photoshop 中重新调整原始图像的大小，使其具有与较小图像相同的纵横比。

例如，而不是使用自定义图像大小portrait-case-study-xl 来裁剪原始图像文件。我删除了这个，而是上传了这个尺寸的原始图像。

add_image_size('portrait-case-study-xl', 1010, 1514, true);
add_image_size('portrait-case-study-lg', 505, 757, true);

这意味着 Wordpress 现在会在不同的屏幕尺寸上选择 'portrait-case-study-lg'，因为纵横比与原始尺寸相同。

如果 Wordpress 可以允许您从 srcset 中删除原始图像，那就太好了，因为这意味着当客户端将图像上传到页面时，我无法自动创建正确的大小。