- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将 image_tag srcset 属性与事件存储变体一起使用
<%= image_tag(@assoc.photo,
srcset:[
[@assoc.photo.variant(resize: "600x600"), "1024w"],
[@assoc.photo.variant(resize: "800x800"), "1980w"]
],
sizes: "100vw") %>
第一行返回:没有将 Symbol 隐式转换为 Integer。
怎么了?
最佳答案
我做了一个调整照片大小的方法:
def photos_variants(photo, width, height)
variation = ActiveStorage::Variation.new(Uploads.resize_to_fill(width: width, height: height, blob: photo.blob))
ActiveStorage::Variant.new(photo.blob, variation)
end
我在我的 srcset 标签中调用这个方法:
<%= image_tag(@assoc.photo,
srcset:[
[url_for(@assoc.photos_variants(@assoc.photo, 400, 300)), "512w"],
[url_for(@assoc.photos_variants(@assoc.photo, 600, 450)), "768w"],
[url_for(@assoc.photos_variants(@assoc.photo, 800, 600)), "1024w"],
[url_for(@assoc.photos_variants(@assoc.photo, 1200, 900)), "1980w"]
],
sizes: "100vw") %>
关于ruby-on-rails - 如何将 image_tag 与 srcset 和事件存储变体一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56082989/
我的目标是为同一图像提供不同版本(分辨率/尺寸),它应该占据视口(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来演示一下
我是一名优秀的程序员,十分优秀!