我一直在努力尝试在本网站上设置响应式图像我正在构建，当我认为它正常运行时，我会在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
任何人都可以解释为什么会这样吗？
答案 0 :(得分：4)
合适的人，我设法找出了为什么页面没有加载正确的图像。正如我在我的问题中提到的，默认情况下，Wordpress只会以相同的宽高比加载srcset中的图像。如果要包含不同比例的自定义图像尺寸，则需要通过wp_calculate_image_srcset功能添加它们。
这样做的问题是，所有自定义尺寸都将加载到每个图像srcset中，浏览器将根据最接近的宽度和比例选择图像。
其次，我意识到Wordpress基于宽高比的图像是原始图像大小，而不是您加载到页面中的自定义大小。所以我的自定义大小为add_image_size('portrait-case-study-lg', 505, 757, true); Wordpress的肖像图像实际上是从原始文件获得2000px x 1500px的宽高比。由于它具有不同的比例，因此我忽略了为肖像尺寸创建的图像尺寸，而是选择了具有最接近纵横比的图像。
我如何解决这个问题是删除将大小添加到srcset中的函数wp_calculate_image_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现在会在不同的屏幕尺寸上选择＆＃39; portrait-case-study-lg'，因为宽高比与原始尺寸相同。
如果Wordpress可以允许您从srcset中删除原始图像，那就好了，因为现在意味着当客户端将图像上传到页面时，我无法自动创建正确的大小。