响应式背景图片

Question

目前我正在构建一个解决方案，通过 JavaScript 设置响应式背景图像。我正在使用 Picturefill 创建跨浏览器支持。

我需要什么？我的页面上有一个元素需要一张漂亮的小背景照片。在页面上有一个图片元素，可以有条件地加载图像。但是，如果浏览器没有适当的图片元素支持，我指定了一个默认图像源。

使用 MooTools，我检查应该在 domready 上显示什么照片，在 window 调整大小时，我再次检查我的图像 'src' 以在需要时替换我当前的照片（使用更大或更小的照片） ).

在 FireFox 中，图片元素替换了 DOM 中的图像 'src'，效果完美！

Chrome（和 IE）不要替换图像 'src' 所以我的照片将始终具有根据 MooTools 的默认照片尺寸。但是，当您通过 Chrome 开发人员工具将鼠标悬停在图像 'src' 上时，它会显示该媒体查询的正确图像源。

我可以了解太多细节，但请相信我，我真的需要像上面提到的那样做，谁愿意帮我解决这个问题？ :)

<script>
    var Placeholder = $('Placeholder');

    var CoverImage = $('MyCover').getElement('img').src;

    Placeholder.setStyle('background-image', 'url(' + CoverImage + ')');

    var $timer = null;

    window.addEvent('resize', function(){

        var ResponsiveImage = function(){

            var $ResponsiveImage = $('MyCover').getElement('img').src;

            $('Placeholder').setStyle('background-image', 'url(' + $ResponsiveImage + ')');
        };

        clearTimeout($timer);
        $timer = ResponsiveImage.delay(250, this);
    });
</script>

<picture>
    <source media="all and (max-width: 30em)" srcset="1.jpg">
    <source media="all and (min-width: 30.063em) and (max-width: 48em)" srcset="2.jpg">
    <source media="all and (min-width: 48.063em) and (max-width: 80em)" srcset="3.jpg">
    <source media="all and (min-width: 80.063em)" srcset="4.jpg">

    <img src="2.jpg">
</picture>

感谢提供可能的解决方案，非常感谢！

干杯，斯特凡

Answer 1

也许我不明白你到底想做什么，但与其尝试使用脚本来控制维度，不如使用 CSS 属性 background-size: cover;反而？这就是我一直用于响应式背景图像的方式，而不是它被浏览器广泛支持。

Answer 2

你真的应该看看http://foundation.zurb.com/docs/components/interchange.html。

也许您可以获得脚本并根据您的情况进行调整？

Answer 3

首先是你的标记：

在picture land中你不需要使用min-width和max-width。第一个匹配的来源是使用媒体查询：

<picture><source media="(max-width: 30em)" srcset="1.jpg">
<source media="(max-width: 48em)" srcset="2.jpg">
<source media="(max-width: 80em)" srcset="3.jpg">
<source srcset="4.jpg">
<img src="2.jpg"></picture>

现在，您实际上需要的是属性 currentSrc，但请注意它的处理方式不同于 src 属性 ,因为是更新的,图片加载后(所以不要用resize,用load).

幸运的是已经有一个简单的lazySizes plugin called bgset, that does exactly what you need. Here you find a demo and here you find the documentation。当然你也可以查看源码，自己搭建。

如果您想使用该插件，您的标记将更改为如下所示：

<div class="lazyload" data-bgset="1.jpg [(max-width: 30em)] | 2.jpg [(max-width: 48em)] | 3.jpg [(max-width: 80em)] | 4.jpg"></div>

Answer 4

我正在使用 currentSrc 属性来获取更新的图像源，它非常有用！感谢大家的帮助！

响应式背景图片

Responsive background images

html

javascript

mootools

responsive-design

picturefill