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自定义大小的肖像图像实际上是从原始文件中获取 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 中删除原始图像，那就太好了，因为这意味着当客户端将图像上传到页面时，我无法自动创建正确的大小。