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

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>

Answer 2

很好

删除(img)标签中的图片尺寸，并在css文件中的class="lazy"中设置图片高度n宽度

现在第二部分的图像大小取决于屏幕分辨率

你需要在css文件

中使用media-query

例如

@media (min-width:320px) { .lazy{height: 200px; width: 300px;} }

@media (min-width:481px) { .lazy{height: 250px; width: 350px;} }

现在当此图片在小型手机/设备中打开时，图片大小将更改为 200x300

如果此图像在平板电脑中打开，图像大小将更改为 250x350

您可以在互联网上找到更多媒体尺寸

希望这能解决您的问题

祝你有美好的一天

Answer 3

@media 和 content 可用于实现这一目标

 @media screen and (max-width: 600px) {
      .lazy{
        content:url(" // image url ");
        }

    }

适用于：

Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6

不适用于：
火狐 27.0
IE 11.0