Question

由于精选图像设置默认尺寸，例如：

add_image_size( 'post-thumbnails2200px', 360, 250, true );
add_image_size( 'post-thumbnails1280px', 250, 250, true );
add_image_size( 'post-thumbnails800px', 150, 250, true );

我的问题是如何在不使用css max-width或任何css样式的情况下显示不同大小的精选图像。

当我尝试使用不同的分辨率时，我无法显示它。实际上，我不知道该怎么做。当我使用css时，它变得扭曲，因为高度固定在250px。

我想知道你是否有人可以分享他们的PHP if和else脚本或javascript或任何东西。请帮忙！

Answer 1

只使用Javascript和PHP：

<强> PHP

根据codex：

，您可以使用the_post_thumbnail()获取各种图片尺寸

the_post_thumbnail();                  // without parameter -> 'post-thumbnail'

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Full resolution (original size uploaded)

the_post_thumbnail( array(100,100) );  // Other resolutions

<强>的Javascript

您可以使用jQuery(window).width()获取here所述的寡妇身份。

通过组合这两者，您可以在主题的模板文件中执行类似以下内容的操作：

<script>
    if( jQuery(window).width() < 480 ) {
        <?php the_post_thumbnail('medium'); ?>
    }
    else if( jQuery(window).width() < 960 ) {
        <?php the_post_thumbnail('large'); ?>
    }
    else {
        <?php the_post_thumbnail('full'); ?>
    }
</script>

警告：我目前没有机器对其进行测试，但如果上述方法不起作用，请尝试将<?php the_post_thumbnail('medium'); ?>替换为image = <?php get_the_post_thumbnail($post_id, 'medium'); ?>;等。（请参阅有关{{1的信息） }} here）。

get_the_post_thumbnail()

Answer 2

我建议你使用Adaptive Images。你会喜欢的。

Answer 3

当我遵循本教程时，我在wordpress中得到了完全响应的特色和发布的图像：

http://premium.wpmudev.org/blog/diy-truly-responsive-images-on-your-wordpress-website/

使用非常棒的Picture Fill插件：

https://github.com/scottjehl/picturefill

我回到这篇帖子发帖。但是我警告你，这个教程有点过时了，而不是div的插件创建者已经切换到了span。当你准备放弃并弹出时，将手枪从袜子中拉出来时要记住这一点。

使用媒体查询时，如何显示不同大小的不同特色图像

3 个答案: