Question

我目前在Wordpress循环中的页面上有一个旋转木马。因此，当它循环时，根据我当前在循环中的帖子更改背景图像。但是，我想使用媒体查询加载较小的图像，例如我的屏幕尺寸较小。

这就是我目前所拥有的：

    while( $loop->have_posts() ) : $loop->the_post();


        $class = '';

        // Custom Posts
        $carousel_image_1       = get_field('carousel_image_1');
        $image_1_title          = get_field('image_1_title');

        if( $slide_counter == 0 ) { $class .= ' active'; }

?>

        <div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
            <!-- Set the first background image using inline CSS below. -->
            <a href="<?php echo get_post_permalink(); ?>" target="_blank">
            <div class="fill" style="background-image:url(<?php echo $carousel_image_1['url']; ?>); background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
            <div class="carousel-caption">
                <h2><?php echo $image_1_title; ?></h2>
                <img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
            </div>
            </a>
        </div>

        <?php $slide_counter++; ?>

    <?php endwhile; wp_reset_query(); ?>

Answer 1

你不能内联使用媒体查询，你将无法在CSS中拥有变量的动态灵活性，因为PHP是服务器端的。

但是，只要JS能够获取PHP变量（我的示例使用jQuery），您就可以使用JavaScript执行此操作：

<?php
while( $loop->have_posts() ) : $loop->the_post();

    $class = '';

    // Custom Posts
    $carousel_image_1       = get_field('carousel_image_1');
    $carousel_image_2       = get_field('carousel_image_2'); // added this, for different size image
    $image_1_title          = get_field('image_1_title');

    if( $slide_counter == 0 ) { $class .= ' active'; }

?>

    <div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
        <a href="<?php echo get_post_permalink(); ?>" target="_blank">
        <div class="fill" style="background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
        <div class="carousel-caption">
            <h2><?php echo $image_1_title; ?></h2>
            <img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
        </div>
        </a>
    </div>

    <script>
    var resizeTimer;
    function resizer() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
        var windowWidth = $(window).width();
        if (windowWidth >= 992) { // for width 992 pixels and up
          $('.fill').css({
            'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
          });
        } else { // smaller sizes
          $('.fill').css({
            'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
          });
        }
      }, 200);
    }
    resizer();
    $(window).on('resize', resizer);
    </script>

    <?php $slide_counter++; ?>

<?php endwhile; wp_reset_query(); ?>

我没有测试过，但我认为它应该可行。您也可以根据自己的喜好调整超时（现在它是200ms）。

或者，如果您不想让它真正响应，只需在页面加载时设置背景，您就可以写下：

<script>
if (windowWidth >= 992) { // for medium size width and up
  $('.fill').css({
    'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
  });
} else { // smaller sizes
  $('.fill').css({
    'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
  });
}
</script>

Answer 2

以下Html CSS仅在移动视图中显示图像

HTML：

 foreach($data as $item):
     echo "
     <div class='col-lg-4'> 
                        <div class='panel panel-primary backImg' style='background-image:url({$item['imageLink']}); background-size:100% 100%;'>   
                 Some Text
        </div>
     </div>";
   endforeach;

的CSS：

@media(min-width: 480px){ 
    .backImg{
        background-image:none !important;
    }
}

在WordPress循环期间动态更改CSS中的背景图像（媒体查询）

2 个答案: