特色图像在索引和发布页面上被裁剪

时间:2015-07-17 作者:Kevin K

我正在使用一个名为“简单引导”的主题,在最近的一次更新之后,该主题开始在索引和帖子页面上裁剪特色图像的高度。当我检查图像的特定元素时,我得到了这样一个结果(包括包围它的div):

<div class="featured-image">
  <a href="http://listen.undertheguntheater.com/index.php/podcast/s2-e4-down-will-come-or-nobody-can-catch-a-break-on-this-show/" title="S2 E4 &#8211; Down Will Come or Nobody Can Catch A Break On This Show">
    <img src="http://i0.wp.com/listen.undertheguntheater.com/wp-content/uploads/2015/06/Under-The-Gun-Presents-11.png?resize=1140%2C488" class="attachment-simple_boostrap_featured wp-post-image" alt="Under The Gun Presents (1)" />
  </a>
</div>
我认为相关的CSS是:

.featured-image img {
  width: 100%;
  height: auto;
}
我是否可以在主题的CSS中添加一些东西来纠正这一点并显示图像的完整高度?我尝试将此添加到CSS中,虽然它确实覆盖了它,但没有修复图像:

.featured-image img {
  height: 100%;
}
您可以在此处查看页面并进行检查:http://listen.undertheguntheater.com/

1 个回复
最合适的回答,由SO网友:Chrisdigital 整理而成

这可能是主题作者为了使主题中的图像具有响应性或自适应性而进行的调整。您可能希望在CSS中添加“最小高度”,这应该可以解决您的问题。

https://css-tricks.com/almanac/properties/m/min-height/

另外,如果使用“100%”任何值,则需要注意的是,实际尺寸由父元素控制(无论是宽度还是高度)。

结束

相关推荐

如何将自定义CSS类添加到所有链接

是否可以向post editor的HTML选项卡生成的所有链接添加CSS类?即自动添加部件class=\'myclass\'?<a class=\"myclass\" href=\"http://www.google.com\">Click me</a> 编辑以避免误解:该类必须添加到编辑器中,而不是通过javascript或HTML动态添加,这是因为并非所有链接都会使用该类,所以在我不需要它的罕见情况下,我只需自己删除它。目前,我正在做完全相反的事情,我自己不断添加cl