如何让全宽图片放大

Question

在我的 wordpress posts 上，我在页面顶部添加了 post 缩略图，使其全宽。它工作正常，除了图片始终保持相同大小，它从不裁剪。因此，如果屏幕很大，图片会被拉伸得太多，看起来会变形。我希望缩略图随着屏幕变大而被裁剪，这样图像看起来总是好看又清晰。（类似于此 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>

然后确保你设置了一些高度：.banner-image class

然后转到您的 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()

在这种情况下，它将针对每个 post 不同的缩略图动态工作

如何让全宽图片放大

how to have full width picture zoom in

html

wordpress

image

image-resizing