如何将元素缩放到最大可能的视图区域？

Question

假设您有一个简单的图片网站，只是为了显示尽可能大的图片而已。通常，只要将宽度和高度设置为100％，当然要保持宽高比就可以了。

但是，就我而言，我在页面顶部有一个（非固定的）导航栏。一种简单的解决方案是简单地减小最大高度，并且在可行的同时，向下滚动时会很烦人。

我将如何设置高度，而不是通过设置固定的高度？可以一次显示]

这是我的意思：

[灰色矩形是导航栏，白色正方形是默认元素高度，而透明正方形是相同的元素，向上缩放并最终填充整个屏幕，同时向下滚动并缓慢使导航栏消失。

奖励点，如果它仅在一个方向上起作用，那么一旦滚动经过，图像就不会再次变小。

假设您有一个简单的图片网站，只是为了显示尽可能大的图片而已。通常，只要将宽高设置为100％，同时保持宽高比为...

Answer 1

如您所知，百分比是相对于父容器的百分比。但是，如果您想将宽度和/或高度设置为viewport