如何使全宽图片放大

Question

在我的wordpress文章中，我在页面顶部添加了帖子缩略图，使其完全宽度。它的工作正常，除了图片总是保持相同的大小，它从来没有农作物。因此，如果屏幕很大，图片就会被拉得太长，看上去很扭曲。我希望缩略图裁剪，因为屏幕变得更大，所以图像将始终看起来很好和清晰。(类似于这个https://www.inthefrow.com/2016/10/3-amazing-places-eat-mykonos.html)，我尝试过添加true，但是这不起作用。有人有什么解决办法吗？提前谢谢。

​

<div class="banner-image"><?php the_post_thumbnail( array( 5555, 2222, true ) ); ?></div>

​

css

​

.banner-image img {
    max-width: 100%;
    width:100%;
    height:700px;
}

​

Answer 1

编辑：

代之以：

 <div class="banner-image"><?php the_post_thumbnail( array( 5555, 2222, true ) ); ?></div>

对此：

 <div class="banner-image"></div>

然后确保在：.类中设置了一些高度。

然后转到您的header.php (或者您的头模板在哪里)，在“head”关闭之前，这样放置：

<style>
    .post .banner-img {
        background-image: url('<?php echo the_post_thumbnail_url() ?>');
        background-size: cover;
        width: 100%;
        height: // what ever you choose
    }
</style>

确保您更改了函数

the_post_thumbnail()
// with
the_post_thumbnail_url()

在这种情况下，它将动态地工作，每一篇文章都是一个不同的缩略图。