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>

如果我需要在那里投射2x（更宽）版本的图像（而不是缩略图），我该怎么做？

我问这个问题是因为我们无法在没有JavaScripts的帮助下使用PHP识别视口大小，而且设计JS是额外的 - 不是强制性的。如果我们认为我们必须根据视口大小抛出图像而不使用JS，那么我们怎么能这样做呢？这实际上是给我带来痛苦的。

Answer 1

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

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

我建议的解决方案是在HTML数据属性中输出al图像并使用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) );

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

1 个答案: