这个问题可能看起来微不足道，但有3年的前端开发经验，我在这方面失败了.我创造了一个最小的可重现的例子.
这是我的示例代码.要查看它，我建议创建一个html文件并使用iPhone SE屏幕尺寸(375x667)在浏览器中查看代码，因为这样y溢出就很明显了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image and Div Layout</title>
<style>
body {
margin: 0;
}
.container {
max-height: 100vh;
}
.container img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="https://wallpapercave.com/dwp2x/wp4471355.jpg" alt="Image">
<div>
<p>1Your content here</p>
<p>2Your content here</p>
<p>3Your content here</p>
<p>4Your content here</p>
<p>5Your content here</p>
<p>6Your content here</p>
<p>7Your content here</p>
<p>8Your content here</p>
<p>9Your content here</p>
<p>10Your content here</p>
<p>11Your content here</p>
<p>AAAAAAAAAAAAAAAAA</p>
</div>
</div>
</body>
</html>
在这张图中，你可以看到唯一的数字 8不再是可见的，但不是9，10，11…
我正在笔记本电脑上的谷歌Chrome开发工具中测试iPhone SE的大小.
我总是希望能看到S所有的<p>米，永远不会有任何的y-溢出.如果没有足够的空间，那么<img>元素应该会收缩.
因此，<p>AAAAAAAAAAAAAAAAA</p>元素应该位于页面的最底部.然后向上看剩下的<p>个元素，最后图像应该会占据剩余的空间.
<img>应该缩小，因为它的高度和宽度应该按照正确的比例变小.关键词:object-fit: contain(但对我不起作用)
图像也应该水平居中&垂直居中在其"剩余空间容器"内.
如果可能的话，我更喜欢不使用任何视窗单位的解决方案，因为在我的实际用例中，页面上还有其他元素，这将与之冲突.因此，解决方案应该依赖于当前可用的高度，在本例中为100vh，但实际上可能并不总是如此.
但如果使用视窗真的是only解决方案(这将是非常令人惊讶的)，那么它也可以使用.
我试着用height: 100vh和Flexbox、Flex-Growth、GRID做一些事情，但它们都不起作用.