Question

特色图片未显示其容器宽度和高度。这是我显示特色图片的方式：

<div id="featuredimage"><?php the_post_thumbnail();?></div>

这是featuredimage

的CSS

#featuredimage {
  height:200px;
  background-color:#000;
  margin-left: -40px;
  margin-right: -40px;
  margin-top: -20px;
}

.featuredimage img {
  height:200px;
  width:600px;
}

这是PHP函数中的代码

<?php
add_theme_support( 'post-thumbnails' );
?>

怎么了？您可以看到最终结果here。您可能会注意到，特色图像采用任何尺寸，但我想要它。

Answer 1

您是否尝试使用ID而不是类，例如

#featuredimage img {
  height:200px;
  width:600px;
}

然而，您正在重复使用该ID，即

<div id="featuredimage">

在您的网页上多次使用。 ID应该是唯一的（请参阅http://www.w3.org/TR/WCAG20-TECHS/H93.html），因此请考虑将其从ID更改为类;

.featuredimage {
  height:200px;
  background-color:#000;
  margin-left: -40px;
  margin-right: -40px;
  margin-top: -20px;
}

.featuredimage img {
  height:200px;
  width:600px;
}

<div class="featuredimage">...</div>

Answer 2

在您的实际页面中，您要在HTML中的图像上设置宽度和高度，然后尝试将其设置为CSS中的背景图像。而不是这样做，只需让图像包含在父div中。你的CSS变成了：

.featuredimage          /* Use a class here so you can use it more than once */
  height:200px;
  background-color:#000;
  margin-left: -40px;
  margin-right: -40px;
  margin-top: -20px;
}

.featuredimage img {
  height:auto;
  width:100%;
}

请务必删除background-size声明，因为此方法不需要它们（源代码中的第140行）。

Answer 3

您还可以使用

获取要素图像

<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img src="<?=$feat_image?>" height="100" width="100">

Answer 4

如果the_featured_image()吐出<img width=...，那么您可以将其替换为不会影响宽高比的内容：

<div style="background-image:url(http://MY_IMAGE_URL.png);
    width: 100%; height: 100%;"
    class="attachment-post-thumbnail wp-post-image"></div>

特色图片问题

4 个答案: