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

Question

У меня возникли трудности с добавлением класса к элементу wordpress. Я хочу добавить объект-fit: cover element к функции Wordpress, но я бегу в стену.

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

Я пытаюсь непосредственно добавить объект-FIT: крышку с помощью CSS IMG, но это не влияет на это. Полностью запутанный, потому что он осуществляется по ширине: 100% и высоте: авто.

.col-4 img{ 
width: 100%; 
height: auto; 
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, высота следует отметить, так что изображение может покрыть эту высоту.

Я бы порекомендовал Вам использовать фоновое изображение, а не 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

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