如何在 WordPress 中根据视口大小提供不同大小的图像?

Posted

技术标签:

【中文标题】如何在 WordPress 中根据视口大小提供不同大小的图像?【英文标题】:How to provide different sizes of images according to viewport size in WordPress? 【发布时间】:2015-01-29 05:22:40 【问题描述】:

由于对程序的了解较少,可能是一个非常基本的问题,但我认为没有问题不那么重要

在 WordPress 中,我们有 4 种默认尺寸:

原创(因为它无处不在) - 没有作物 大 - 通常为 1024 × 1024 中等 - 通常为 300 × 300 缩略图 - 通常为 150 × 150 - 严格裁剪

我们可以编辑/停用除原始尺寸之外的所有默认尺寸,并可以添加/编辑/删除任何自定义尺寸,甚至可以使用自定义脚本为宽屏设备启用 2x 支持。但这就是我的理解停止的地方——我们有我们想要的图像和它们的大小,现在怎么办?我们如何根据视口大小显示/交付它们?

假设我有一段代码是:

<article class="news">
    <?php the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) ); ?>
    <div class="entry-excerpt"><?php the_excerpt(); ?></div>
</article>

如果我需要在那里放置 2 倍(更宽)版本的图像(而不是缩略图),我该怎么做?

我问这个问题是因为如果没有 javascript 的帮助,我们无法使用 PHP 识别视口大小,而且设计 JS 是额外的 - 不是强制性的。如果我们认为我们必须在不使用 JS 的情况下根据视口大小来抛出图像,那我们怎么能这样做呢?这就是真正让我感到痛苦的原因。

【问题讨论】:

您可以使用 jQuery...在页面加载时获取所有图像大小变化的 URL,然后根据屏幕大小使用 jQuery 加载图像。我会使用srcset...但它不完全受支持。 是这个问题,怎么改或者如何确定改? @RST 好问题,实际上两者是相互关联的。如果我可以在变量中获取视口,我可以轻松放置条件标签来过滤尺寸。实际上我正在寻找 [如果有的话] 无 JS 的方式。 您有没有想过类似“Bootstrap”的东西,以帮助您的网站响应? 【参考方案1】:

我只能想到一种没有 JS 的解决方案,而且它很糟糕。 您可以加载所有图像并使用 CSS 媒体查询仅显示一个。你的网站会很大很慢,但如果你不能使用 JS,这是我能想到的唯一选择。

PHP get_browser(http://php.net/manual/en/function.get-browser.php) 可用于对客户端窗口大小进行某种原始估计。但这将是一个估计。

我建议的解决方案是在 html 数据属性中输出所有图像并使用 JS 确定正确的大小,然后用 corect src 替换以前的空 src

图像元素示例:

<img src="" 
     data-full-src=" full-link "
     data-large-src=" large-link "
     data-medium-src=" medium-link "
     data-small-src=" small-link " />

JS函数示例:

var image = getElementById( your-img-ID ); //or some other selector
var selectedSrc = "data-full-src";
image.setAttribute('src', image.getAttribute(selectedSrc) );

【讨论】:

如果我能坚持使用 JS,那我为什么不能选择最好的呢? :p

以上是关于如何在 WordPress 中根据视口大小提供不同大小的图像?的主要内容,如果未能解决你的问题,请参考以下文章

根据视口大小设置背景图像以覆盖

如何在 Puppeteer 中设置最大视口?

Flutter中如何根据视口高度约束ListView

CSS背景图像,根据视口调整大小[重复]

根据宽度和高度保持纵横比

如何使用JavaScript和CSS Grid使基于屏幕/视口大小的RadWindow响应