Wordpress博客主页CSS问题

Question

我试图设置博客帖子特色图片大小一致的博客主页。

我调整了这段代码:

HTML:

<div class="featured-image-excerpt">
  <img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post.png" alt="infographic-7-blog-post" srcset="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post.png 2480w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-98x300.png 98w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-768x2341.png 768w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-336x1024.png 336w" sizes="(max-width: 2480px) 100vw, 2480px" width="2480" height="7558">
</div>

CSS

.attachment-post-thumbnail {
    height: 460px;
    width: 100%;
}

但是现在，正如你在访问页面时看到的那样，信息图的特色图像在主博客页面上被压扁了。

我想做的是将图像截断在460px，而不是让它被压扁以适合460px(用于主博客页面)。换句话说，特色图像的摘录应该在460px处截断。

为什么不工作?会什么?

提前感谢。

Answer 1

一种可能的CSS唯一解决方案是将您给图像的尺寸设置为包装器div，并设置overflow: hidden;来切断图像，例如:

.featured-image-excerpt {
    height: 460px;
    width: 100%;
    overflow: hidden;
}
.attachment-post-thumbnail {
    width: 100%;
}

从您的图像规则中删除height，它应该工作

Answer 2

使用add_image_size函数在functions.php文件中添加新的图像大小。在本例中，添加以下代码:

add_image_size( 'custom-size', 240, 180, true );

这将设置图像大小为240x180，并裁剪图像大小。命名为custom-size

然后在你的页面中使用它，你可以这样做:

<div class="featured-image-excerpt">
<?php the_post_thumbnail('custom-size'); ?>
</div>

您可能还需要重新生成所有缩略图，您可以使用许多可用的插件之一来完成此操作。