个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
24
4
是否可以让 srcset 在页面加载后重新计算浏览器窗口大小，从而更新其使用的图像。
你想要这样做的原因是因为如果在桌面上你有你的浏览器窗口压缩，加载一个网站，然后使浏览器窗口变大，它只会缩放“small.jpg”(如设置srcset) 这样用户最终会得到一个像素化的图像。
我开始制作一个 jsfiddle 来显示这个问题，但它并没有很好地工作，因为我认为 srcset 是由浏览器窗口计算的，而不是 jsfiddle 结果网格。
如果你有兴趣可以在下面复制并粘贴到一个空白的 html 文件中并在本地服务器中运行它(必须在本地 http://服务器上以便你可以查看网络调试选项卡以查看浏览器加载了哪个图像)。使用 file:/// 通过文件 url 在浏览器中运行它不会让您看到通过网络调试选项卡加载了哪个图像。
<body>
<div class="wrapper">
<img
src="http://i.imgur.com/DoWeH0X.jpg?1"
srcset="http://i.imgur.com/QV9vace.jpg?1 1400w, http://i.imgur.com/ZqkR6Bk.jpg?1 800w, http://i.imgur.com/gltBZ06.jpg?1 300w"
alt="#"
>
</body>
</html>
最佳答案
你可以使用
var img = document.getElementById('resizeMe');
window.onresize = function() {
img.outerHTML = img.outerHTML;
}
这将导致HTML再次通过解析器发送，导致浏览器根据srcset重新加载图像。
当然，您可能应该包含一些逻辑来检测屏幕尺寸是否已更改为当前范围之外的尺寸，这样每次用户稍微调整窗口大小时图像都不会重新加载。
或者，您可以克隆节点，将其插入到当前节点之前，然后删除旧节点。
var img = document.getElementById('resizeMe');
window.onresize = function() {
var clone = img.cloneNode(true);
img.parentNode.insertBefore(clone, img);
img.remove();
}
这也会导致parse重新渲染html，但是会消耗更多的资源。
关于html - 如果调整浏览器窗口的大小，是否可以重新计算使用的 `srcset` 图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30899271/
24
4
0
我的目标是为同一图像提供不同版本(分辨率/尺寸)，它应该占据视口(viewport)宽度的 100%，因此我可以为移动设备(或者通常是显示器更小或更慢的设备)提供 800px 版本连接)，1366px
这是我的图片标签的样子: 对于桌面设备，我使用小拇指 (270x190)。对于移动设备，我使用大拇指 (690x486)。但是，如何使用中号拇指 (540x380) 为 Retina 桌面创建规则？
我有这个带有几个不同 src 的图片标签，它只加载了一个。我觉得我是按照说明操作的，但它只加载了 600 像素宽度的图像(w_600 图像)。 这是一个 Live Demo 我试图让它在桌面上加载最
我将其用于我的新页面的移动版本(媒体查询): 目前在手机和 DPR 手机上工作正常...... 所以现在下一步是添加平板电脑(768 像素)。 我认为应该可以这样: 所以这将结合 DPR 和设备
如果 srcset 不存在，我正在尝试将其更改为默认图像。 如果窗口低于 465px，则如果 Small.jpg 不存在，则 img 行将使用默认值。如果图像不存在，我就无法更改 srcset。有任何
我正在尝试根据设备宽度提供响应式/自适应图像。 原图: 使用 Srcset: 我面临两个问题: 1) 即使在较小的设备(如 iPhone 6s)上，也会加载宽度为 2000px 的图像(它应该加载
据我所知，srcset 和 sizes 属性更侧重于为设备的尺寸和分辨率应用适当缩放的图像。 似乎没有工具可以使用这些属性来根据屏幕尺寸选择替代图像，例如裁剪或方向不同的图像。 这样理解正确吗？这是否
有没有办法在不在 sizes 属性中指定原始宽度的情况下将 scrset 添加到图像？ 例如，我有这张图片: 原始尺寸为 555px。正如预期的那样，它在大于 480 像素的视口(viewport)
这是我的 img 标签: 我正在使用 imgix，它根据 dpr 查询参数以正确的像素密度返回图像。以上似乎不起作用，图像未以正确的大小呈现。我没有使用正确的格式吗？ 最佳答案 您不能在 srcse
我正在尝试在我的网站上实现视网膜 (2x) 图像。我们的页面是从模板构建的，我们只使用标准的内联图像: 我想我可以很聪明，用 srcset 更新它: 但是，我们还没有许多这些图像的 2x 变体。
我一直在尝试使用以下 HTML 实现新的 srcset 方法来响应图像 我使用的是 chrome 40，我得到的只是最大的图像，调整浏览器大小、清除缓存没有任何作用。 我在某处读到我
我正在尝试在新窗口中打开图像并根据 srcset 加载正确的图像，以便根据分辨率打开正确的图像尺寸 html: jQuery $(".gallery-cell").on("click",
我有一个带有 srcset 属性的图像标签，其中包含一个值(url)。现在我还需要为 src 属性获取并生成相同的内容。 $('img').attr('srcset') 上面的代码不起作用并返回未定义
我正在使用功能检测来确定浏览器是否支持 .webp 格式并仅为这些浏览器加载 javascript。我在客户端执行此操作的原因是 PHP 解决方案(使用 .htaccess)不起作用，可能是因为我的
我正在尝试将 srcset 与来自 Bootstrap 的 container-fluid 结合使用。 我知道，有问题，但我不知道是什么!我正在尝试使用 calc，因为我没有图像宽度的确切数字。 在@
我有一张带有 srcset 的图片: 我想知道当前显示的是哪些候选人，理想情况下我会返回 2x.png 或 4x.png，具体取决于哪个图像浏览器已选择。 我认为 img.src 会这样做，但据我从
假设我有一张图片 现在这也可以是 这样的格式 此外，(不是有效的 HTML) 现在我如何提取具有最高分辨率图像的 URL。 我想拆分 srcset 然后提取大小，但问题是大小可以在 1200w
我想升级我的标记以使用“图片”元素，同时依赖我作为后备编写的响应式图像脚本。 有什么方法可以有条件地仅在不支持该元素的浏览器中触发我的响应式图像脚本？ Modernizr 似乎直到 v.3 才提供此测
我目前正在尝试在我的网站上制作更好的响应图像。经过一些研究，我发现了 srcset 和 sizes 属性。 我的目标如下: 当屏幕尺寸大于 600 像素或小于 300 像素时，我想提供 250x250
我在流体布局上将 lazysizes 插件与 srcset 结合使用。我不知道如何让浏览器将页面加载到正确的长度，而不是在滚动时扩展页面。 我用bootstrap框架做了一个codepen来演示一下
我是一名优秀的程序员,十分优秀！