화면 크기에 따라 인라인 배경 이미지를 변경하는 방법은 무엇입니까?

인라인 배경 이미지를 변경할 수 있습니까? 화면 크기가 767px 너비까지 내려 가면 배경 URL이 변경됩니다. 화면 크기에 따라 인라인 배경 이미지를 변경하는 방법은 무엇입니까?

나는이 순간에 다음 코드를 내가하지만 순발력이 섹션에 클래스 나 ID를 설정하고 대신 CSS를 사용하여 다음 이미지를 변경 @media 쿼리를 사용할 수 있다는 것을 알고

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

인라인으로 변경할 수있는 방법이 있는지 알고 싶습니다.

출처

2015-01-29 Craig

u는 background-size 속성을 보았습니까? –

자바 스크립트와 함께, 인라인 스타일을 변경하는 방법이

$(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'); 
    } 
});

출처

2015-01-29 13:13:51 adeneo

완벽한! 고마워, 내 질문에 대답했다. – Craig

미디어 쿼리가 똑같은 일을 할 때 jquery를 사용해야하는 이유가 확실하지 않습니까? – Aaron

@Aaron - 내가 질문을 읽었 기 때문에, 특히 OP가 미디어 쿼리에 대해 알고 있다고 말하고 있지만 그것을 찾고 있지는 않습니다. – adeneo

다음과 같습니다 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">

볼은 더 많은 정보를위한이 링크 http://responsiveimages.org/

출처

2015-01-29 13:14:09 Aaron

... _terrible_ 브라우저 지원을 제공합니다. http://caniuse.com/#feat=srcset – Turnip

앞으로 더 멋지게 꾸미기는 하겠지만 특정 픽셀의 이미지를 바꾸는 것이 아니라 이미지를위한 것입니다. 브라우저는 망막 화면과 같이 가장 적합한 이미지를 계산하므로 사용자가 실제로 제어하지는 못하지만 ** 동일한 ** 이미지의 다른 해상도를 제공하면 유용합니다. – adeneo

은 배경 이미지가 아닌 전경 이미지 용입니다. – jazkat

화면 크기에 따라 인라인 배경 이미지를 변경하는 방법은 무엇입니까?

답변

관련 문제