如何使css max-height正常工作?

Question

，帮帮我!: -)

我不是一个真正的编码，但试图建立一个网页，有一个iframe与一个嵌入式画布，是响应。我希望动画在一定程度上放大，但之后保持固定。我似乎已经实现了这一点，但我有问题的框架，它不断变大。我使用的代码是一个填充技巧，用于使iframe按比例缩放到它的内容。但是max-height似乎对它没有任何影响。测试页面在这里:

https://iamsteve.co.uk/test1/

黑色是iframe背景，蓝色是wrapper背景，这似乎是什么让我如此头痛!我怎样才能让蓝色停止膨胀?

<div class="wrapper" style="position:relative; overflow: hidden; padding-top: 44.5%;">
    
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border: 0;" src="https://iamsteve.co.uk/houseofholmes/test.html" gesture="media"  allow="encrypted-media" allowfullscreen>
</iframe>
</div>
<style>
    .wrapper {
        background-color: blue;
        max-height: 400px;
    }
    iframe {
        max-height: 400px;
        background-color:black;
    }
</style>

任何帮助都非常感谢!多谢。史蒂夫。

Answer 1

我试着看看你的代码。如果我没理解错的话，试试这个。似乎调整你的填充顶部，你用它来获得正确的区域，你想在框架上只需要少%。你也可以在iframe的顶部添加一个假装div，并调整它的高度和宽度。

.wrapper {
  padding-top:30%;
  }

<div class="wrapper" style="position:relative; overflow: hidden; padding-top: 30%;">