html - 在一个版本的 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%部分。尝试使用其他一些值，您会看到。

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