Добавление класса в функцию WordPress

У меня возникли трудности с добавлением класса к элементу wordpress. Я хочу добавить элемент 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>

Я пытаюсь напрямую добавить object-fit: cover в img через CSS, но это не влияет на него. Полностью запутанный потому что свой быть произведенным эффект шириной: 100% и высота: автомобиль.

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

Я пытался снять ширину и авто и просто иметь обложку object-fit:, но она все еще не вступает в силу на странице.

Заранее спасибо за помощь.

2 ответа

  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, высота должна быть упомянута так, чтобы изображение могло покрыть эту высоту.

    Я бы рекомендовал вам использовать фоновое изображение, а не object-fit cover. Пожалуйста, проверьте http://caniuse.com/#feat=object-fit для совместимости с другими браузерами.

    Источник о том, как использовать размер фона обложки

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

  2. Вы можете использовать background-imageили просто сделать изображение width: 100%

    1. Использование фонового изображения

    Вы должны установить высоту изображения или сохранить соотношение сторон div с 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. Изображение с шириной: 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>