在一个版本的 chrome 上，图片垂直拉伸

Question

在http://phoenixprints.org/viewpicture.php?pid=258 上，主画面垂直拉伸，看起来很糟糕。我不知道它为什么会发生，而且似乎只在某个时候发生。并非所有图片都会出现这种情况，这让我感到困惑。

我正在运行 18.0.1025.151（Developer Build 130497 Linux）在 Ubuntu 12.04 上构建，但它没有发生。

19.0.1084.56 m google chrome 在 windows xp 上可以吗？

Answer 1

您使用此样式将图像高度设置为 100%：

.viewimg img {
  width:  100%;
  height: 100%;
}

似乎没有一个父元素明确给出height，所以WebKit（在我的例子中是Mac/Safari）可能选择了窗口的高度作为计算百分比的参考。

在 firefox 中它只起作用，因为它似乎完全忽略了 height: 100% 部分。尝试使用其他一些值，您会看到。

我的解决方案是简单地从 css 中删除 height: 100%，浏览器应该（理论上）通过保持其正常的纵横比来调整图像的大小。