Wordpress関数にクラスを追加する

Question

クラスをワードプレス要素に追加するのが難しいです。私はobject-fit：cover要素をWordpress関数に追加したいが、私は壁にぶち当たっている。

<!-- Row  --> 
<article class="col-4"> 
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> 
</article> 

私が直接オブジェクトフィットを追加しようとしています：CSSを通じてIMGにカバーし、それはそれには影響しません。これは幅：100％と高さ：autoによって影響を受けるため、完全に混乱します。

.col-4 img{ 
width: 100%; 
height: auto; 
object-fit: cover; 
} 

私はオブジェクトフィットを持つオフだけの幅と自動を取って試してみた：カバーを、それはまだページに反映されません。

ご協力いただきありがとうございます。 object-fit: coverについて

Answer 1

使用

.col-4 img{ 
    width: 100%; 
    height: 200px; // height should be mentioned so that image can cover that place 
    object-fit: cover; // Image will fill the 200px space 
} 

像がその高さをカバーすることができるように、高さが言及されるべきです。

object-fit coverではなく背景画像を使用することをお勧めします。他のブラウザとの互換性についてはhttp://caniuse.com/#feat=object-fitをチェックしてください。背景サイズのカバー

https://css-tricks.com/perfect-full-page-background-image/

Answer 2

あなたはbackground-imageを使用するか、単にあなたが持っている背景画像に

を使用して画像width: 100%

1を作ることができるの使用方法の

ソース画像の高さを設定するかMaintain the aspect ratio of a div with CSS

012幅の

.article-photo { 
 
    display: block; 
 
    width: 100%; 
 
}

<article class="col-4"> 
 
\t <?php if (has_post_thumbnail()) : ?> 
 
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="article-photo" style="background-image: url('<?php the_post_thumbnail_url('full'); ?>')"> 
 
    </a> 
 
\t <?php endif; ?> 
 
</article>

2.画像：100％

.article-photo { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.article-photo img { 
 
    display: block; 
 
    width: 100%; 
 
}

<article class="col-4"> 
 
\t <?php if (has_post_thumbnail()) : ?> 
 
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="article-photo"> 
 
    \t <?php the_post_thumbnail('category-thumbnail'); ?> 
 
    </a> 
 
\t <?php endif; ?> 
 
</article>