响应的特色图像不起作用

时间:2018-08-11 作者:MrMachoman86

也许我误解了(很可能),但我正在尝试使用二十六岁的方法来尝试让我通过WordPress上传的图像具有响应性。

我只是勉强修改了代码,但无论我尝试什么,图像都不会调整大小。

下面是我在函数中添加的内容。php:

    function b2f_post_thumbnail_sizes( $attr, $attachment, $size ) {
       if( \'post-thumbnail\' === $size ) {
        $attr[\'sizes\'] = \'(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px\';
    }
    return $attr; 
} 

add_filter( \'wp_get_attachment_image_attributes\', \'b2f_post_thumbnail_sizes\', 10, 3 );
我正在使用:

the_post_thumbnail();
在索引中。php调用我的图像。但是,它没有调整大小。

你知道为什么吗?

编辑:我已经添加了HTML输出。

<img width="1200" height="800" src="http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1200x800.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1200x800.jpg 1200w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-150x100.jpg 150w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-300x200.jpg 300w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-768x512.jpg 768w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1024x683.jpg 1024w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px">

1 个回复
SO网友:MrMachoman86

似乎我忘记了一个关键方面:编辑img元素的CSS。

我将img设置为:

 img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
这解决了图像没有响应的问题。

结束

相关推荐

Images in Blog List

我只是改变了主题。我的博客页面列表用于显示我在每篇文章中使用的图像(内容图像,而非特色图像)。我使用图像的URL,而不是媒体库。单个帖子页面显示图像,但博客列表页面不会显示图像,除非我将图像添加到媒体库中。是否有任何代码和/或插件可用于确保在我将图像添加到单个帖子的内容时,该图像包含在博客列表页面上?是否有办法填充过去包含图像但不再在列表页上显示图像的帖子?谢谢