代码之家 › 专栏 › 技术社区 › jmng

srcset-响应图像加载错误文件

responsive-images responsive-design html5 css html

1

jmng · 技术社区 · 6 年前

我的目标是为同一图像提供不同版本(分辨率/大小),这应该占视区宽度的100%,因此我可以为移动设备(或通常是显示器较小或连接较慢的设备)提供800px版本,为大型桌面显示器提供1366px及以上版本。

问题是我用Chromium设备模拟器测试它,一些小屏幕设备加载1366px版本而不是800px:iPhone6/7/8(375px宽)加载800px图像,但iPad(768px)、Nexus5(360px)和iPhoneX(375px)都加载1366px而不是800px。

我对正确理解SIZES指令不是很有信心,这里是我的代码,默认的SRC引用2880px版本只是为了帮助测试:

<img class="img-fluid" 
    srcset="img/dreamstime_800w_109635242.jpg 800w,
         img/dreamstime_1366w_109635242.jpg 1366w,
         img/dreamstime_2880w_109635242.jpg 2880w"
    sizes="(max-width: 800px) 100vw,
        (max-width: 1366px) 100vw,                      
        2880px 100vw"
    src="img/dreamstime_2880w_109635242.jpg"/>

4 回复 | 直到 5 年前

1

2

Heiruspecs 6 年前

2

3

Nicolas Hoizey 6 年前

sizes sizes="100vw"

srcset

<img srcsetâ¦ sizesâ¦>

<picture>

html <picture> <source media="(max-width: 800px)" srcset="img/dreamstime_800w_109635242.jpg 800w"> <source media="(max-width: 1366px)" srcset="img/dreamstime_1366w_109635242.jpg 1366w"> <img src="img/dreamstime_2880w_109635242.jpg"> </picture>

3

0

Fulvio ReddKaa Romanin 6 年前

我把它改成

<img class="<?= $image_class;?>" data-caption="<?php echo $image['alt']; ?>"
data-src="<?php echo $image['sizes']['medium']; ?>"
data-srcset="<?php echo $image['sizes']['medium']; ?> 600w 2x, 
<?php echo $image['sizes']['large']; ?> 1280w 2x"
sizes="(min-width: 150px) 600px, 100vw"
width="150" height="150"
alt="<?php echo $image['alt']; ?>">

所有的事情都成功了——至少我能知道发生了什么。呸。大家圣诞快乐!

4

0

Duns 5 年前

用Chrome模拟器测试我的网页时,我有时会发现(像你一样)明显加载了一个比需要大的图像,特别是在小型移动设备上。我终于意识到这不是我的错误,而是Chrome从缓存中提取了一个更大的图像,如果它恰好有一个。单击模拟器中的复选框禁用测试时的缓存,问题就消失了,我希望看到的加载大小实际上已经加载。