CSS全屏DIV布局及图片等比例适配问题求助

你需要实现图片至少垂直填满bottomdiv、不超出屏幕范围且保持比例的效果，原代码的核心问题是缺少容器溢出控制，或是对object-fit的适配逻辑理解偏差，以下是针对性解决方案：

方案一：优先垂直填满，裁剪水平超出部分（完全匹配需求） #

该方案让图片高度完全填满bottomdiv，宽度超出容器的部分会被隐藏，确保图片整体不超出屏幕，同时严格保持比例。

修改要点：

• 给bottomdiv添加overflow: hidden，强制隐藏超出容器的图片区域
• 保留object-fit: cover，它会让图片按比例拉伸/缩小以填满容器，自动裁剪超出部分

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Super Site</title>
</head>
<body style="margin: 0; padding: 0; border-width: 0; overflow:hidden;">
    <div id="wrapper" style="position: relative; height: 100vh; background-color: yellow;">
        <div style="position: absolute; left: 0; right: 0; top: 0; height: 8%; background-color: red; display: flex; align-items: center; justify-content: center;">
            <h1 style="margin: 0;">An awesome quote will go here!</h1>
        </div>
        <div style="position: absolute; left: 0; right: 0; bottom: 0; top: 8%; height: 92%; background-color: purple; overflow: hidden;">
            <img src='1.jpg' style='object-fit: cover; width: 100%; height: 100%;'>
        </div>
    </div>
</body>
</html>

额外优化：替换已废弃的<center>标签为flex布局，实现更规范的文字居中效果。

方案二：确保图片完整显示，尽可能填满容器 #

如果需要图片完整展示（不裁剪），同时在垂直方向尽可能填满容器（仅当图片为竖图时能完全垂直填满），可修改图片样式为：

<img src='1.jpg' style='height: 100%; width: auto; max-width: 100%;'>

此方案下图片会保持原始比例完整显示，不会超出屏幕，但仅当图片宽高比小于容器宽高比时，才能垂直填满bottomdiv。

内容的提问来源于stack exchange，提问作者Trinity