Wordpress 响应式图像未选择正确的图像或方向

Question

我在 Wordpress 中创建了自定义图像大小，以便与默认安装的响应式图像插件一起使用。我添加的图片尺寸是：

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

然后，我使用 metabox.io 插件从 PHP 构建图像，并将加载的图像设置为显示为 Portrait-case-study-lg。然后我使用 metabox.io 中的函数加载 srcset，并创建了我希望图像更改的自定义尺寸。

$images = rwmb_meta('su_project-featured-portrait-left', array('limit' => 1,
 'size' => 'portrait-case-study-lg'), $post->ID);

<a href="<?php echo $image['full_url']; ?>" itemprop="contentUrl" data-size="<?php echo $image['width']; ?>x<?php echo $image['height'];?>">
                                    <img class="scene_element scene_element--fadeinup" src="<?php echo $image['url']; ?>" srcset="<?php echo esc_attr($image['srcset']); ?>" 
                                    sizes="(max-width:40em) 767px, (min-width: 40.063em) and (max-width: 64em) 455px, (min-width: 64.063em) and (max-width: 90em) 455px, (min-width: 90.063em) 505px, 100vw" itemprop="thumbnail" alt="Image description" >
                                </a>

结果如下所示：

<img class="scene_element scene_element--fadeinup"
 src="http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-505x757.jpg" srcset="http://localhost:8888/wp-
content/uploads/2017/11/chelsea-sw3-apartment-bedroom-300x200.jpg 300w, 
http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-768x512.jpg 768w, http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-1024x683.jpg 1024w, 
http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-355x238.jpg 355w, http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-955x637.jpg 955w,
 http://localhost:8888/wp-content/uploads/2017/11/chelsea-sw3-apartment-bedroom-940x627.jpg 940w" sizes="(max-width:40em) 767px, 
(min-width: 40.063em) and (max-width: 64em) 455px, 
(min-width: 64.063em) and (max-width: 90em) 455px, 
(min-width: 90.063em) 505px, 100vw" itemprop="thumbnail" alt="Image 
description">

我遇到的问题是它现在加载宽度和高度为 768x512 的横向图像，而不是加载 505x757 图像。任何人都可以帮助我吗？我对响应式图像非常陌生，当我认为我已经破解它时。然后它开始选择错误的图像:(

提前致谢。

Answer 1

我破解了它。我没有将自定义图像尺寸添加到 Wordpress srcset :)