向 Wordpress 函数添加类答案

【问题标题】：Adding class to Wordpress function向 Wordpress 函数添加类
【发布时间】：2017-02-11 16:48:36
【问题描述】：

我在向 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;
}

我已经尝试关闭宽度和自动功能，只设置 object-fit:cover，但它仍然没有在页面上生效。

提前感谢您的帮助。

【问题讨论】：

请考虑使用背景图片而不是适合对象的封面。它不支持所有浏览器。连IE11和edge都不支持。 caniuse.com/#feat=object-fit

标签： php html css wordpress

【解决方案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.使用背景图片

你要设置图片的高度或者Maintain the aspect ratio of a div with 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>

【讨论】：