html - 图像下的大空白区域，使用百分比调整大小，以便图像在所有查看平台上填满屏幕

Question

我正在构建一个网站，该网站依赖于屏幕上较大的图像，因此我选择使用百分比来控制大小。我试图处理的问题是总是出现在图像下方的空白区域。我已经尝试了很多建议，但没有任何效果。是因为原始图像比查看的图像大(按百分比缩小)吗？我应该以某种方式摆脱垂直滚动条吗？ 帮助将不胜感激

这是我正在处理的页面的链接

http://www.michael-simpson.co.uk/New%20Site/BenchPaintingsPages/BenchPainting74.html

Answer 1

你的问题是你右栏的高度不是像素。

.RightColumn {
      height: 100vw;
}

将其更改为:

.RightColumn {
      height: 100px;
}

当您不确定问题是什么时，检查问题的一个好方法是使用浏览器 HTML 检查器(在 Chrome 中为 Ctrl + Shift + C)。它将向您显示正在应用的每个规则，并允许您更改/关闭它们以查看动态发生的情况。在这种情况下，您的 RightColumn 类的高度会拉伸(stretch)到 1900+ px。