- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在 Wordpress 4.4 images get automatically a srcset
attribute .我的问题如下(我在写这个问题时解决了这个问题,请参阅下面的答案):
src="http://...
引用替换为 src ="https://...
(我后来将其更改为 src="//...
以支持两种协议(protocol));src
属性中都获得了正确的 URL;srcset
属性的图像中,其中的 URL 始终带有 http://
引用。为什么会这样?为什么这些 URL 没有得到我新更新的 https://
开头?
最佳答案
在wp-includes
文件夹中搜索了一会儿,media.php
文件中的wp_calculate_image_srcset
方法使用了这2行:
$image_baseurl = _wp_upload_dir_baseurl();
$image_baseurl = trailingslashit( $image_baseurl ) . $dirname;
并且这个 $image_baseurl
实际上会形成 srcset
属性的新 URL,即即使整个 URL 在 wp_posts
表中并且在src
属性中使用,它的开头不会被使用。
这意味着如果您在 wp_options
表中的基本 url 仍在 http://
中,则图像将获得该协议(protocol)并且默认情况下不会显示在 https 中导航时通过您的浏览器。
为了解决这个问题,您只需将 wp_options
表中 option_value
内的 URL 更改为 https://
或只需 //
如果您仍想同时支持这两种协议(protocol) ( double slashed )。您可以在单个查询中执行此操作:
UPDATE `wp_options`
SET `option_value` = replace(option_value, 'http://', '//')
WHERE `option_name` IN ('siteurl', 'home')
关于Wordpress:srcset 在所有帖子中获取 HTTP 而不是 HTTPS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35460815/
我的目标是为同一图像提供不同版本(分辨率/尺寸),它应该占据视口(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来演示一下
我是一名优秀的程序员,十分优秀!