使用 attr() 在不同的屏幕尺寸上响应显示不同的背景图像答案

【问题标题】：Responsively show different background images on different screen sizes using attr()使用 attr() 在不同的屏幕尺寸上响应显示不同的背景图像
【发布时间】：2019-02-01 11:12:58
【问题描述】：

挑战在于，从我的 CMS（为了争论起见，假设 WordPress）我可以为我的页面上的横幅获取不同的背景图像裁剪尺寸。这些裁剪尺寸是针对不同的屏幕尺寸（基于手机、平板电脑、笔记本电脑等）生成的。

我希望能够将所有不同裁剪大小的图像 URL 作为属性呈现到横幅 DOM 元素上，然后在外部 CSS 文档中使用媒体查询来选择正确的显示。我想这样做的原因是我可以编写 PHP 以在不同的页面上动态提供裁剪的图像。

类似 HTML：

<div style="background-image:url('/img/sm-background-image.jpg')"
   md-background-image="url('/img/md-background-image.jpg')"> ...

CSS：

@media (min-width: 768px) {
    .background-image-style {
        background-image: attr('md-background-image')!important; /* All screen sizes above the smallest and default size */
    }
}

因此，所有 768 像素或更大的屏幕宽度都将显示md-background-image 属性中提供的图像，低于此尺寸的任何内容都将显示style 属性中定义的默认background-image。

我可以看到background-image 目前不支持attr()，虽然这有一些未来的范围，但我现在不能使用它。

【问题讨论】：

标签： php html css content-management-system responsive-images

【解决方案1】：

我通过结合使用 CSS var() 方法和 style 属性实现了预期的效果。

我的 PHP 代码如下所示：

<div class="banner-image" style="
        --xl-background-image:url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>');
        --lg-background-image:url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>');
        --md-background-image:url('<?php echo $image['sizes']['md_header_banner_wide']; ?>');
        background-image:url('<?php echo $image['sizes']['sm_header_banner_wide']; ?>')">

呈现 HTML：

<div class="banner-image" style="
        --xl-background-image:url('/wp-content/uploads/2019/02/Products-Header-1489x600.jpg');
        --lg-background-image:url('/wp-content/uploads/2019/02/Products-Header-1400x564.jpg');
        --md-background-image:url('/wp-content/uploads/2019/02/Products-Header-1024x413.jpg');
        background-image:url('/wp-content/uploads/2019/02/Products-Header-768x309.jpg')">

因此，我可以使用以下 CSS 和媒体查询组合在我的外部 style.css 文件中根据客户端的屏幕尺寸显示不同的图像：

@media (min-width: 768px){
    .banner-image {
        background-image: var(--md-background-image)!important;
    }
}
@media (min-width: 992px){
    .banner-image {
        background-image: var(--lg-background-image)!important;
    }
}
@media (min-width: 1200px){
    .banner-image {
        background-image: var(--xl-background-image)!important;
    }
}

我在 Chrome 和 FireFox（在 Windows 上）和 Safari（在 Mac 上）使用开发者工具检查了这一点，我没有发现任何可比性问题。

替代方法：

另外，我在编写上述解决方案时意识到，风险较小 的方法可能是将我的样式直接呈现到页面中。我想这只是将这两种可能性分开的兼容性和/或编码标准的问题。

<style type="text/css"> 
    @media (min-width: 768px){
        .banner-image {
            background-image: '<?php echo $image['sizes']['md_header_banner_wide']; ?>'!important;
        }
    }
    @media (min-width: 992px){
        .banner-image {
            background-image: url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>')!important;
        }
    }
    @media (min-width: 1200px){
        .banner-image {
            background-image: url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>')!important;
        }
    }
</style>

【讨论】：