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>

我试图通过CSS直接添加object-fit：cover到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

＆＃13;

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

＆＃13;

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

＆＃13;

<强> 2。图片宽度：100％

＆＃13;

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

＆＃13;

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

＆＃13;

将类添加到Wordpress函数

2 个答案: