从wp_get_attachment_image中删除一个srcset条目

Question

我正在使用以下代码创建一个使用Swiper库的全屏背景幻灯片：

 'attachment',
        'numberposts'    => -1,
        'post_parent'    => get_the_ID(),
        'post_mime_type' => 'image',
        'orderby'        => 'menu_order',
        'order'          => 'ASC',
    );

    ?>
    
    

    ' . wp_get_attachment_image( $attachment->ID, 'full' ) . '';
        }
    }
    ?>

此代码返回如下所示的图像标记：

我使用以下CSS代码使图像覆盖整个屏幕：

.swiper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  object-fit: cover;
  height: 100vh;
}

问题在于，那些使用智能手机访问该网站的用户正在获取模糊图像，因为他们的浏览器正在为智能手机(https://www.example.com/wp-content/uploads/2018/10/image-300x162.jpg)选择最小的图像。对于网格中的缩略图来说，这个大小是可以的，但对于全屏背景幻灯片则不是这样。

我的问题是，是否可以为这个特定的https://www.example.com/wp-content/uploads/2018/10/image-300x162.jpg 300w调用删除srcset条目<#>而不使用preg_replace()或类似的regexp函数？

Answer 1

这是错误的做法。移动设备正在为小型映像服务，因为默认的sizes属性对于您的用例是不正确的，而不是因为srcset。

如果您提供了一个正确的sizes属性，那么浏览器将选择一个更合适的源。如果在不更改sizes属性的情况下删除300 w版本，浏览器可能只会选择600 w版本，这可能仍然是模糊的。事实上，考虑到现代移动显示器的分辨率，我敢打赌它已经选择了600 w或更高的版本，但这还是太模糊了。

图像之所以模糊，是因为您的sizes属性(实际上是WordPress的默认属性)告诉浏览器，在比2664px小的显示器上，图像显示在100vw，即视口宽度，但是由于您的CSS，图像实际上显示在100vh，这意味着如果显示是垂直的，图像实际上会显示得更宽。

您需要告诉浏览器实际显示的图像的宽度。如果您的图像是16:9，则该图像将以显示高度的1.77倍(16/9为1.77)显示。您可以通过将sizes属性设置为calc(100vh * 1.77)来告诉浏览器：

wp_get_attachment_image(
    $attachment->ID,
    'full',
    null,
    array(
        'sizes' => 'calc(100vh * 1.77)',
    )
);

不幸的是。由于图像是垂直大小的，除非您知道原始图像的高宽比，否则不可能提供100%准确的sizes属性。如果您或您的用户要在此滑块中使用各种不同的图像，则可能需要动态计算比率：

$image = wp_get_attachment_image_src( $attachment->ID, 'full' );
$ratio = $src[1] / $src[2];

wp_get_attachment_image(
    $attachment->ID,
    'full',
    null,
    array(
        'sizes' => "max(100vw, calc(100vh * $ratio))",
    )
);

我在这里添加了max()，以表明图像将显示在100vw或calc(100vh * $ratio)上，无论哪个是更宽的。这是为了解释object-fit的行为，如果原始图像是高和狭窄的。