Wordpress 함수에 클래스 추가하기

Question

클래스를 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를 CSS를 통해 img에 직접 추가하려고 시도하지만 영향을 미치지 않습니다. 폭 : 100 % 및 높이에 의해 영향을 받기 때문에 완전히 혼란스러워.

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

너비와 자동 조절 기능을 사용하고 object-fit : cover를 사용 해봤지만 페이지에는 여전히 영향을주지 않습니다.

미리 도움을 주셔서 감사합니다. 이미지가 그 높이를 커버 할 수 있도록

Answer 1

object-fit: cover 들어

.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을 확인하십시오. 당신은 background-image를 사용하거나 배경 이미지 당신이이

를 사용하여 이미지 width: 100%

1. 할 수

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

Answer 2

를 배경 크기 커버를 사용하는 방법에 대한

는

소스 이미지의 높이를 설정하거나 Maintain the aspect ratio of a div with CSS

012 폭 3,516,

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