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 (min-width:320px) { .lazy{height: 200px; width: 300px;} }

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

现在，当此图像在小型手机/设备中打开时，图像尺寸将变为200x300

如果此图片在平板电脑中打开，图片尺寸将更改为250x350

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

希望这能解决你的问题

度过愉快的一天

Answer 3

@media 和内容可用于实现

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

    }

适用于：

Chrome 14.0.835.163
Safari 4.0.5
歌剧10.6

不起作用：
FireFox 27.0
IE 11.0

加载不同的内嵌图像以获得更小的屏幕分辨率

3 个答案: