如何在不同的断点使用背景封面设置不同的横幅图像？

时间：2015-06-07 作者：crondeau

我使用以下代码查看特征图像是否存在，并将我的横幅图像设置为：

<?php if ( has_post_thumbnail() ) : 
        $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'hero\', \'\' );
    ?>
    <div class="banner" style="background: url(<?php echo $src[0]; ?>) no-repeat center center; 
                      -webkit-background-size: cover;
                      -moz-background-size: cover;
                      -o-background-size: cover;
                      background-size: cover;">
我想更改此设置，并在不同的断点处显示不同的图像，使用：

<?php if ( has_post_thumbnail() ) : 
    $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'hero\', \'\' );
    $tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), \'tablet\', \'\' );
    $phablet = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'phablet\', \'\' );
    $phone = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'phone\', \'\' );
?>
我不确定如何在中指定媒体查询，我使用了与标记类似的东西，但我更希望将图像作为背景封面。

有什么建议吗？

1 个回复
SO网友:Mathew Tinsley

我这样做的方式是将background: url(...) 所有物

<?php if ( has_post_thumbnail() ) : 
    $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'hero\', \'\' );
    $tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), \'tablet\', \'\' );
    $phablet = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'phablet\', \'\' );
    $phone = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'phone\', \'\' );
?>
<style>
    @media only screen and (min-width : 480px) {
        .banner {
            background-image: url(\'<?php echo $phone; ?>\');
        }
    }

    @media only screen and (min-width : 768px) {
        .banner {
            background-image: url(\'<?php echo $phablet; ?>\');
        }
    }

    @media only screen and (min-width : 992px) {
        .banner {
            background-image: url(\'<?php echo $tablet; ?>\');
        }
    }

    @media only screen and (min-width : 1200px) {
        .banner {
            background-image: url(\'<?php echo $hero; ?>\');
        }
    }
</style>
<?php endif; ?>
您必须根据需要调整断点。请注意，我是按类选择横幅的。如果页面上有多个横幅，则必须为每个横幅分配一个ID，并使用该ID来选择它们。

这个background-size 属性可以位于样式表中，因为它适用于所有设备。

另一种方法是在服务器端嗅出设备，然后只提供必要大小的图像。此解决方案将允许您只提供一个图像，而不是四个图像。

我不喜欢这种解决方案，因为您必须维护一个用户代理到设备类型映射的列表，并且您不会得到很多好处。

大多数浏览器不会获取它不需要的图像，因此即使内联CSS解决方案提供了四个图像，浏览器实际上也只能下载一个图像。

我认为最好的解决办法是使用picture element. 不幸地browser support 因为现在这个元素不是很好。

结束
标签： images   小码农  

相关推荐

定义`GET_POST_QUALUALY_Images`的大小，它们似乎已调整为150x150

我正在使用get_post_gallery_images 它可以输出150x150的图像。它看起来不需要大小参数，所以我假设它只会显示最大的图像，或者最好是我定义的一个大小。150x150太小了，有没有地方可以声明我想要多大尺寸的画廊图片？例如，我正在做：<?php $gallery = get_post_gallery_images( $post ); foreach ($gallery as $img) { ?> <li><img src