Adding class to Wordpress function

Question

I'm having difficulty adding a class to a wordpress element. I want to add the object-fit: cover element to a Wordpress function, but I'm running into a wall.

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

I'm attempting to directly add the object-fit:cover to the img through CSS, but it doesn't effect it. Totally confused because its being effected by the width: 100% and height: auto.

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

I've tried taking the width and auto off and just having the object-fit: cover, but it still doesn't take effect on the page.

Thanks in advance for your help.

Please consider using background image rather than object-fit cover. It does not support in all browsers. Even IE11 and edge does not support it. http://caniuse.com/#feat=object-fit — Kiran Dash, Oct 03 '16 at 17:14

score 0 · Answer 1 · answered Oct 03 '16 at 17:24

Use

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

For object-fit: cover, the height should be mentioned so that the image can cover that height.

I would recommend you to use background image rather than object-fit cover. Please check http://caniuse.com/#feat=object-fit for compatibility with other browsers.

Source on how to use background size cover

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

score 0 · Answer 2 · edited May 23 '17 at 12:19

You can use background-image or simply make the image width: 100%

1. Using background-image

You have to set the height of the image or Maintain the aspect ratio of a div with CSS

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

<article class="col-4">
 <?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>
 <?php endif; ?>
</article>

2. Image with width: 100%

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

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

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

Adding class to Wordpress function

2 Answers2