对动态图像内容使用媒体查询

Question

我见过几个使用媒体查询根据屏幕宽度动态显示不同图像的示例。

这是我在其他地方找到的一个 jfiddle 示例： 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;
  }
}

对于像搜索结果页面这样在页面加载之前不知道所需图像的内容，您如何做到这一点？

Answer 1

为此找到了一个很好的解决方案。除了使用媒体查询，我们可以使用 jQuery 的 $(window).resize() 函数并根据当前窗口大小更改 src 属性。

在这里编写代码： 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);
});

};

感谢达斯汀佩奇的伟大笔。