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 的尺寸中，但没有任何 react :

(min-width: 2048px) 1010px 

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

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

Answer 1

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

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

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

我如何解决这个问题是删除功能 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 中删除原始图像，那就太好了，因为这意味着当客户端将图像上传到页面时，我无法自动创建正确的大小。