首次页面加载时的 Chrome/Safari 图像高度问题答案

【问题标题】：Chrome/Safari image height issue on first time page load首次页面加载时的 Chrome/Safari 图像高度问题
【发布时间】：2014-08-06 19:51:33
【问题描述】：

我正在做我的第一个网站，并决定使用 Bootstrap3。我已经开始研究具有四个“功能”列的部分，其中每个列一个图像。我包含指向我的开发者版本的链接：

http://tymekpudlik.github.io/kajtek/

在 Chrome/Safari 中存在一个问题，即四个图像图标（大脑图像所在的部分）的高度比我们首次启动网站时应具有的高度大得多。我打开 Chrome DevTools 并单击图像的 css 高度属性，然后再输入一个相同的百分比值 (90%)，图像正在更改为正确的大小。问题仅适用于 Chrome/Safari。

图片的css属性没有什么特别的：

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 90%;
    width: 90%;
}

我将非常感谢任何帮助。谢谢！

【问题讨论】：

标签： html css twitter-bootstrap google-chrome frontend

【解决方案1】：

将该img的父元素（即具有“功能文本中心”类的div）的样式更改为

height:auto; 而不是height:100%;

这个技巧可以帮到你..

【讨论】：

太棒了！谢谢，没想到这么容易解决。它现在工作正常。再次感谢！