图像大小(响应滑块)

时间:2016-10-26 09:48:20

标签: jquery html css image responsive-design

我在网站上使用了响应式http://bxslider.com/。问题是,我有一个大文件大的图像,如果我想在移动设备上观看我的网站,它需要很长时间才能加载。

bxslider在html中使用img-tags,我正在寻找一种方法,浏览器maby决定哪个Images Version,例如大,中,小将选择。

我知道,它如何在css中用于div,例如媒体查询,但我不知道,如何用html中的图像完成。

有什么建议吗?

对不起,我的英文:P

2 个答案:

答案 0 :(得分:0)

对于响应式图片,我们必须将 max-width:100% 添加到图片代码中。和外部div或哪个元素可以设置宽度。它可以使用css媒体查询重新考虑设备宽度。

答案 1 :(得分:0)

在图片的src属性中使用您要为移动用户显示的图片,并在另一个属性(例如data-fullsize="fullsize.jpg")中将图片设置为更好的分辨率。

如果用户使用台式PC(例如文档宽度超过600像素),则通过属性data-fullsize中给出的来源替换图像源。 为此,您可以使用JavaScriptjQuery。 您可以添加另一个属性来临时备份移动用户的图像路径以获得响应(如果您更改文档宽度而不将页面重新加载到较小的大小)。