php - 使用媒体查询时如何显示不同尺寸的不同特色图片

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

您可以使用 the_post_thumbnail() 获得各种图像尺寸根据 codex :

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

您可以按照描述获得寡妇大小here使用 jQuery(window).width() .

通过结合这两者，您可以在循环内的主题模板文件中执行类似以下操作:

<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'); ?>;等(参见有关 get_the_post_thumbnail() here 的信息)。

<?php $post_id = get_the_ID(); ?>

<div id=my-div></div>

<script>
    if( jQuery(window).width() < 480 ) {
        var image = <?php get_the_post_thumbnail($post_id, 'medium'); ?>;
    }
    else if( jQuery(window).width() < 960 ) {
        var image = <?php get_the_post_thumbnail($post_id, 'large'); ?>;
    }
    else {
        var image = <?php get_the_post_thumbnail($post_id, 'full'); ?>;
    }

    jQuery('#my-div').append(image);
</script>