Klasse zu Wordpress-Funktion hinzufügen

Question

Ich habe Schwierigkeiten beim Hinzufügen einer Klasse zu einem Wordpress-Element. Ich möchte das Objekt-passen: Cover-Element zu einer Wordpress-Funktion hinzufügen, aber ich renne in eine Wand.

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

Ich bin versucht direkt das Objekt-fit hinzuzufügen: Abdeckung mit dem img durch CSS, aber es bewirkt es nicht. Völlig verwirrt, weil es durch die Breite bewirkt wird: 100% und Höhe: Auto.

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

Ich habe versucht, nimmt die Breite und die Auto-Off und mit nur dem Objekt-fit: Abdeckung, aber es dauert immer noch nicht wirksam auf der Seite.

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Verwenden

.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 
} 

Für object-fit: cover sollte die Höhe erwähnt werden, so dass das Bild, das die Höhe abdecken kann.

Ich würde Ihnen empfehlen, Hintergrundbild anstelle von object-fit cover zu verwenden. Bitte überprüfen Sie http://caniuse.com/#feat=object-fit auf Kompatibilität mit anderen Browsern.

Quelle, wie Hintergrund Größe Abdeckung

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

Answer 2

Sie background-image oder einfach das Bild machen können verwenden width: 100%

1. Mit Hintergrund-Bild

Sie müssen Stellen Sie die Höhe des Bildes oder Maintain the aspect ratio of a div with CSS

.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. Bild mit Breite: Hintergrundbild verwenden, anstatt objekt fit Abdeckung 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>