html - 为较小的屏幕分辨率加载不同的内联图像

Question

我正在尝试根据屏幕分辨率加载不同的内联图像(分辨率越小，图像越小)。目前我有这个:

<img class="lazy" data-original="img1.jpg" src="img1.jpg" alt=""
  height="638" width="1349">

过去我使用过背景图片和媒体查询。有没有办法使用内联图像来做到这一点？

Answer 1

我认为最好的解决方案是:但它仍然是一个工作草案并且还没有(广泛的)支持

<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

更多关于 responsive images .

现在你可能想使用 picturefill JavaScript:

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</span>