图像大小（响应滑块）答案

【问题标题】：Image size (responsive slider)图像大小（响应滑块）
【发布时间】：2016-10-26 09:48:19
【问题描述】：

我在我的网站上使用响应式http://bxslider.com/。问题是，我的图片很大，文件很大，如果我想在移动设备上观看我的网站，加载需要很长时间。

bxslider 与 html 中的 img-tags 一起工作，我正在寻找一种方法，让浏览器可以决定他将选择哪个图像版本，例如大、中或小。

我知道，css 中的 div 将如何工作，例如媒体查询，但我不知道如何处理 html 中的图像。

有什么建议吗？

对不起，我的英语：P

【问题讨论】：

标签： jquery html css image responsive-design

【解决方案1】：

对于响应式图片，我们必须将 max-width:100% 放到图片标签中。以及外部 div 或哪个元素可以设置宽度。可以使用 css 媒体查询重新编写设备宽度。

【讨论】：

我正在使用一个名为 bxslider 的工具，并且图像会自动调整大小，但我想，这个工具总是使用最大的文件大小。
如果你使用 bxslider 它已经响应了。无需添加自定义样式。如果它不起作用，您可以将样式 max-width: 100% 添加到 img 元素
或者你可以检查你的脚本是真还是假。并使其成为真正的“响应式：真正”

【解决方案2】：

在图像的src 属性中使用您要向移动用户显示的图像，并在另一个属性中设置分辨率更高的图像（例如data-fullsize="fullsize.jpg"）。

如果用户使用台式电脑（例如文档宽度超过 600 像素），则将图像源替换为属性 data-fullsize 中给出的源。为此，您可以使用JavaScript 或jQuery。您可以添加另一个属性来临时备份移动用户的图像路径以提高响应速度（如果您更改文档宽度而不将页面重新加载到更小的尺寸）。

【讨论】：