3

由于特色图片设置了默认尺寸，例如：

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 时，由于高度固定为 250 像素，它会变形。

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

4

3 回答 3

3

仅使用 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

您可以使用这里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>

警告：我现在没有一台机器可以测试这个，但如果上面的方法不起作用，请尝试用 etc. 替换<?php the_post_thumbnail('medium'); ?>（image = <?php get_the_post_thumbnail($post_id, 'medium'); ?>;参见有关get_the_post_thumbnail() 此处的信息）。

<?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>
于 2013-04-25T01:50:17.277 回答
0

我建议您使用自适应图像。你会喜欢的。

于 2013-04-20T19:39:14.203 回答
0

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

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

使用非常棒的图片填充插件：

https://github.com/scottjehl/picturefill

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

于 2013-12-30T22:04:21.073 回答