如何修改帖子缩略图中的响应图像

时间:2016-08-21 作者:G.determinism

我有一个简单的两栏网站(一个侧边栏+一个主页)。在侧栏区域中,我使用此代码显示一些帖子缩略图:

<?php the_post_thumbnail(\'custom-size-small\' ,array(\'class\' => \'image\', \'title\' => strip_tags(get_the_title()), \'itemprop\' => \'image\')); ?>
我的网站响应速度很快,在较小的设备上,侧边栏会落在主栏下面,当这种情况发生时,侧边栏会变得与主栏一样宽。我的“custom size small”是“300px”,你可以想象当侧边栏放在列下时,如果查看器仍然大于300px,图像的质量就会受到影响。这让我想到了WP上使用srcset的这个相对较新的特性。但问题是,我想使用它的方式与我们通常使用的方式完全相反,即大图像用于小屏幕,反之亦然。

我们可以让WP在台式机上使用“定制尺寸小”,在较小的屏幕上使用更大的“定制尺寸大”,它是两倍大吗?

/*我不是编码员,我只能篡改代码*/

如果你能告诉我应该对此做些什么改变,那就太好了?

<?php the_post_thumbnail(\'custom-size-small\' ,array(\'class\' => \'image\', \'title\' => strip_tags(get_the_title()), \'itemprop\' => \'image\')); ?>

2 个回复
SO网友:Mark Kaplun

这基本上是离题的,但你的假设是srcset 在某种程度上与使用桌面相关=>移动设备是错误的。这个srcset 属性通知浏览器有关可选图像和大小的信息the browser that selects which image to use 基于它想要的任何标准。因此,如果您的代码输出srcset 属性,您会看到图像的非最佳匹配,因为浏览器认为这是最好的选择,例如,如果缓存中已有图像,则可能不希望加载新图像。自srcset 属性的设计目的是将控制权交给浏览器,在wordpress方面您可以做的不多。

SO网友:Ladislav Janeček

您可以将以下代码添加到CSS中:

.image {
    max-width: 100%;
    width: auto;
    height: auto;
}
而且它会做出响应!

相关推荐

Wp_List_Table not responsive

im使用wp_list_table 在我的后端主题上初始化,以显示我保存在数据库中的一些信息,但有很多信息,我想让它响应,根据屏幕大小显示/隐藏一些元素。我以为它会自动发生,就像在显示帖子的表中一样,但事实并非如此。以下是小屏幕中所有帖子的示例这是我在小屏幕上的wp\\u list\\u表我如何在没有黑客的情况下修复这个bug,wordpress core有什么解决方案吗?类似帖子谢谢