web-dev-qa-db-ja.com

サムネイルアスペクト比の問題

私のwordpressテーマの1つのテンプレートでこのようなサムネイルを使用しました→

<?php the_post_thumbnail( 'medium' ); ?>

ブラウザではこんな感じです→

<img 
    width="300" 
    height="220" 
    src="http://example.com/image-300x220.jpg" 
    class="attachment-medium size-medium wp-post-image" 
    alt="" 
    srcset="
        http://example.com/image-300x220.jpg 300w, 
        http://example.com/image.jpg 640w" 
    sizes="(max-width: 300px) 100vw, 300px"
>

私の最初の質問は、height = autoをどのように置くかということです。これを達成するのに役立つ関数はありますか？ responsive-imgなど

一言で言えば、私はCSSを介して幅を制御する必要がありますかWordPressはこれを行うためのいくつかの機能を提供する？

post-thumbnailsset-post-thumbnail-size
2
The WP Novice

あなたのimg URLから高さの値を削除したい場合は、この関数を使用できます。

add_filter( 'post_thumbnail_html', 'remove_thumbnail_height', 10, 5 );
function remove_thumbnail_height( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $html = preg_replace( '/height=\"\d*\"/', "", $html );
    return $html;
}

これは高さを空の値に置き換えます。 Autoプロパティの値としてheightを使用することはできません。それはW3バリデータによって検証されません。ただし、CSSで高さを自動に設定することができます。

.wp-post-image {
    height: auto;
}
1
Jack Johansson

あなたはこのようなものを使うことができます、

2番目のパラメータは、次のように属性の配列として使用できます。

the_post_thumbnail('medium', ['class' => 'img-responsive', 'alt' => get_the_title()]);

ブートストラップフレームワークを使用していない場合は、スタイルシートに

.img-responsive{
   width: 100%;
}
1
Bikash Waiba