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

Question

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

在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的情况下根据视口大小抛出图像，那么我们该怎么做？那实际上是在给我痛苦。

Answer 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) );