Question

我正在尝试将博客帖子特色图片大小设置为the main blog page上的一致。

我调整了这段代码：

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并将图像裁剪为大小。给它起一个名字＆＃39; custom-size＆＃39;。

要在您的页面中使用它，您可以这样做：

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

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

Wordpress博客主页CSS问题

2 个答案: