为什么srcset不工作? [英] why is srcset not working?

查看:308
本文介绍了为什么srcset不工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我有这样的代码:



< html>< head>< / head>< body>< img src =small.jpgsrcset =https://media.kulturbanause.de/blog/2014/09/responsive-images/small.jpg 320w,https ://media.kulturbanause.de/blog/2014/09/responsive-images/medium.jpg 600w,https://media.kulturbanause.de/blog/2014/09/responsive-images/large.jpg 900walt根据以上所述,我们可以根据这些信息来判断是否存在这样的问题,这些问题包括:

代码,应该为不同的视口大小加载不同的图像。然而,当我在手机上运行此代码时,它仍然显示large.jpg,即使对于320w(视口宽度),也应该加载小图片。

解决方案


根据代码,应该为不同的视口大小加载不同的图像。


您误解了 [srcset] 的工作原理。 [srcset] 允许您为设备使用一系列不同的来源,并为设备提供选择可能的图像的选项对于设备来说是最佳的。

目的是节省带宽,因此设备通常会下载最合适他们屏幕的图像,尽管还有很多其他的我不打算进入这里的细微差别。



不是要做的是在各种图像,当一个不同的断点将适用。这是< picture> 元素的作业。


So i have this code:

<html>
<head>
</head>
<body>

<img src="small.jpg" srcset="https://media.kulturbanause.de/blog/2014/09/responsive-images/small.jpg 320w, https://media.kulturbanause.de/blog/2014/09/responsive-images/medium.jpg 600w, https://media.kulturbanause.de/blog/2014/09/responsive-images/large.jpg 900w" alt="">

</html>

According to the code, there should be a diffrent image be loaded for diffrent viewport sizes. however when I run this code on my phone, it still shows the large.jpg even for 320w (viewport width) the small one should be loaded.

解决方案

According to the code, there should be a diffrent image be loaded for diffrent viewport sizes.

You've misunderstood how [srcset] works. [srcset] allows you to suggest a series of different sources for a device to use and give the device the option to pick an image that's likely to be optimal for the device.

The purpose is to save bandwidth, so devices typically download the largest image that would reasonably fit on their screens, although there are a lot of other nuances that come in to play that I'm not going to get into here.

What devices are not going to do is switch between the various images when a different breakpoint would apply. This is the job of the <picture> element.

这篇关于为什么srcset不工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆