동적 이미지 내용에 대한 미디어 쿼리 사용

Question

미디어 쿼리를 사용하여 화면 너비에 따라 서로 다른 이미지를 동적으로 표시하는 몇 가지 예제를 보았습니다. http://jsfiddle.net/Ruddy/byH2j/

위의 예에서 이미지 경로 하드 당신이 검색 결과 같은이 작업을 할 수있는 방법 CSS

@media screen and (min-width: 1080px) { 
.site-header .site-branding { 
    background-image: url("../images/logo_big.png") !important; 
    background: blue; 
    } 
} 
@media screen and (max-width: 1079px) { 
    .site-header .site-branding { 
    background-image: url("../images/logo_med.png") !important; 
    background: green; 
    } 
} 

에 코딩 : 여기

내가 다른 곳에서 발견 jfiddle 예입니다 페이지가로드 될 때까지 필요한 이미지를 알 수없는 페이지?

Answer 1

위대한 해결 방법을 찾았습니다. 미디어 쿼리를 사용하는 대신 jQuery의 $ (window) .resize() 함수를 사용하고 현재 창 크기를 기반으로 src 특성을 변경할 수 있습니다. 여기

Codepen : 위대한 펜 더스틴 페이지로 http://codepen.io/dustinpage/pen/ytwjb

$(window).load(function() { 
    //Wait for images to load before displaying them. 
    //This prevents image flashing. 
    resizeImage(); 
    $('.image-resize').show(); 
}); 

$(window).resize(function() { 
    //Whenever the window is resized check to see if new image needed. 
    //Using the code to call images in Seven7 this way is OPTIONAL. 
    //Performance will be better if you don't use ".resize" event. 
    resizeImage(); 
}); 

function resizeImage() { 

$('.image-resize').each(function() { 
    var element = $(this), 
     src = $(this).attr('src'), 
     regx = /wid=\d+(\.\d)*/g, 
     currentWidth, 
     newWidth, 
     newSrc; 

    if ($(window).width() > 1824) { 
    /* Large Displays ----------- */ 
    //Return large image if screen size is over 768px 
    currentWidth = src.match(regx); 
    newWidth = 'wid=2000'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 
    else if ($(window).width() <= 1824 && $(window).width() > 1366) { 
    /* Desktops ----------- */ 
    //Return large image if screen size is over 768px 
    currentWidth = src.match(regx); 
    newWidth = 'wid=1824'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 
    else if ($(window).width() <= 1366 && $(window).width() > 767) { 
    /* Desktops ----------- */ 
    //Return large image if screen size is over 768px 
    currentWidth = src.match(regx); 
    newWidth = 'wid=1024'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 
    else if ($(window).width() <= 767 && $(window).width() > 480) { 
    /* Tablets (portrait) ----------- */ 
    //Return medium image if screen size is between 481-767px 
    currentWidth = src.match(regx); 
    newWidth = 'wid=767'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 
    else if ($(window).width() <= 480) { 
    /* Smartphones ----------- */ 
    //Return small image if screen size is less than 480 
    //Note: Default image state is small so this "else if" is technically not needed. 
    currentWidth = src.match(regx); 
    newWidth = 'wid=480'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 

    element.attr('src', newSrc); 
}); 

}; 

신용.