將類添加到Wordpress函數

我無法將類添加到wordpress元素。我想將對象適合：封面元素添加到Wordpress函數，但我正在跑到牆上。將類添加到Wordpress函數

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

我試圖通過CSS直接添加對象適合：封面到img，但它沒有影響它。完全困惑，因爲它受到寬度：100％和高度：自動影響。

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

我試着服用寬度，自動關機，只是具有對象的契合：蓋，但它仍然沒有考慮在頁面上的效果。

在此先感謝您的幫助。

來源

2016-10-03 Dwayne Crawford

請考慮使用背景圖像，而不是對象合蓋。它不支持所有瀏覽器。即使IE11和Edge也不支持它。 http://caniuse.com/#feat=object-fit –

使用

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

來源

2016-10-03 17:24:47

源您可以使用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>

來源

2016-10-03 17:26:29 nanilab

將類添加到Wordpress函數

回答

相關問題