通过媒体查询更改图像

Question

我想在显示小于 400px 时更改图像（为此我不能将图像用作背景）。我想用 display:block 显示 1，用 display: none 隐藏另一个。

我的问题是，如果我这样做，浏览器会加载两个图像并隐藏其中一个，还是只加载其中一个？ (display:block)。如果浏览器加载两个图像，我需要找到一种方法来更改图像的 src

Answer 1

为了避免加载图像两次（不使用正常的 css 媒体查询），您可以使用 window.matchMedia (JS);

var breakpoint = window.matchMedia( "(min-width: 400px)" )

if (breakpoint.matches) {
    // window width is at least 400px
   // you load one img
}
else {
    // window width is less than 400px
    // you load other img
}

Answer 2

好的..你可以检查这个Whosebug post, Media queries and background images you must use min-width and mix-width into css and there is a webpage with more information for mediaquery´s assets http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 3

您也可以为此使用响应式图像 - 新的 <picture> 标签或经典 <img> 的 srcset 属性。这里有很好的解释：

http://responsiveimages.org/

它仍然是一项很新的技术，并不是所有浏览器 (srcset, picture), however there are polyfills (i.e. Picturefill) 都支持它 JavaScript。

模拟它

通过媒体查询更改图像

Changing image via media queries

html

css

media-queries