如何动态设置背景图像大小？

Question

我有一个 1600 x 1000 的图像用作背景图像，带有一个输出每个部分的 ACF 转发器字段，每个部分都有自己独特的背景图像。 我很担心手机。 有没有办法根据wp_if_mobile()动态填充背景图像大小？ 这是我的一些代码：

$banners = get_field('home_page_banner');

foreach ($banners as $banner) {
   
      $background_image = $banner['background_image']; //Here's the variable, which is set to ACF Image Field Array.

     //additional vars here


      echo '<div class="home-page-banner grayscale" style="background-image: url(' . esc_url($background_image['url'])  . '); ">'; // Here's where the background-image goes

      //other stuff in here


      </div>';

      $result_count++;
    }; ?>

我在想类似的事情：

$background_image = $banner['background_image']

if( wp_is_mobile() ) {
  $background_image = $banner['background_image][sizes]['some_smaller_size_here'];
}

想法？

Answer 1

我的预感是正确的。 我首先添加了一个适合我需要的新图像大小： add_image_size('home_page_banner', 800, 533);

然后我像这样重写了我的条件：

if (wp_is_mobile()) {
        $background_image = $banner['background_image']['sizes']['home_page_banner']; //returns url
      } else {
        $background_image = $banner['background_image']['url']; // returns url
      }

最后，我将我的回声语句重写为：

echo '<div class="home-page-banner grayscale" style="background-image: url(' . esc_url($background_image)  . '); ">';

现在我可以在桌面上使用 1600 像素的背景图像，在移动设备上使用 800 像素宽的图像。