我在网站上使用了响应式http://bxslider.com/。问题是,我有一个大文件大的图像,如果我想在移动设备上观看我的网站,它需要很长时间才能加载。
bxslider在html中使用img-tags,我正在寻找一种方法,浏览器maby决定哪个Images Version,例如大,中,小将选择。
我知道,它如何在css中用于div,例如媒体查询,但我不知道,如何用html中的图像完成。
有什么建议吗?
对不起,我的英文:P
答案 0 :(得分:0)
对于响应式图片,我们必须将 max-width:100% 添加到图片代码中。和外部div或哪个元素可以设置宽度。它可以使用css媒体查询重新考虑设备宽度。
答案 1 :(得分:0)
在图片的src
属性中使用您要为移动用户显示的图片,并在另一个属性(例如data-fullsize="fullsize.jpg"
)中将图片设置为更好的分辨率。
如果用户使用台式PC(例如文档宽度超过600像素),则通过属性data-fullsize
中给出的来源替换图像源。
为此,您可以使用JavaScript
或jQuery
。
您可以添加另一个属性来临时备份移动用户的图像路径以获得响应(如果您更改文档宽度而不将页面重新加载到较小的大小)。