如何根据屏幕尺寸更改内嵌背景图像？

Is there anyway to change an in-line background image so if screen size gets down to 767px in width the background URL is changed.

无论如何都要更改内嵌背景图像,因此如果屏幕大小下降到767px宽,则后台URL会更改。

I have the following code at the moment:

我现在有以下代码:

<section class="inner-header" style="background:url(/images/sports-glasses.jpg) no-repeat center top;">

I know that I can set a class or ID to this section and use CSS instead and then use @media queries to change the image but for quickness I would like to know is there a way to change it inline?

我知道我可以在此部分设置类或ID并使用CSS代替然后使用@media查询来更改图像但是为了快速我想知道有没有办法在内部更改它?

2 个解决方案

#1

There is a way to change the inline styles, with javascript

有一种方法可以使用javascript更改内联样式

$(window).on('resize', function() {
    if ( $(this).width < 767 ) {
        $('.inner-header').css('background', 'url(/images/other.jpg) no-repeat center top');
    } else {
        $('.inner-header').css('background', 'url(/images/sports-glasses.jpg) no-repeat center top');
    }
});

#2

There is a newish answer to responsive inline images using srcset="" which looks like this:

使用srcset =“”响应内联图像有一个新的答案,如下所示:

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

see this link for more info http://responsiveimages.org/

有关详细信息,请参阅此链接http://responsiveimages.org/

#1