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だと高さが250px固定なので歪んでしまいます。

誰かが自分の php if やスクリプト、javascript などを共有できるかどうか疑問に思っています。助けてください！

4

3 に答える 3

3

Javascript と PHP だけで:

PHP

codexthe_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()。

2 つを組み合わせることで、ループ内のテーマのテンプレート ファイルで次のようなことができます。

<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() 

<?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 に答える