优化宽布局缩放：如何实现100%视口覆盖？

你的代码用100vmin作为尺寸基准，只会取视口宽高中较小的一方来计算矩形大小，因此当视口宽高比和16:9（你的矩形比例）不一致时，必然会出现留白。要实现铺满视口且维持比例的效果，需要让矩形尺寸足够覆盖整个视口，超出部分裁剪，同时保持居中显示。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            margin: 0;
            overflow: hidden; /* 隐藏超出视口的部分 */
            height: 100vh;
        }

        .rectangle {
            /* 基于宽度设置16:9的高度 */
            width: 100vw;
            height: 56.25vw;
            /* 当视口高度大于16:9比例对应的高度时，强制铺满高度，同时计算对应的宽度 */
            min-height: 100vh;
            min-width: calc(100vh * 16 / 9);
            /* 绝对定位+transform实现居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #66ccff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .rectangle-text {
            font-size: 15vmin;
            font-weight: bold;
            font-family: Arial, sans-serif;
        }
    </style>
    <title>Rectangle</title>
</head>

<body>
    <div class="rectangle">
        <span class="rectangle-text">RECTANGLE</span>
    </div>
</body>

</html>

关键逻辑说明 #

• overflow: hidden：给body添加这个属性，用来裁剪矩形超出视口的部分，避免出现滚动条。
• 双基准尺寸设置：
  • 先以视口宽度为基准，设置16:9的高度（56.25vw是100vw * 9/16的结果）。
  • 再通过min-height:100vh和min-width:calc(100vh *16/9)确保：当视口高度超过16:9比例对应的高度时，矩形会强制铺满高度，同时自动计算出足够覆盖视口的宽度。
• 绝对定位居中：通过position:absolute+transform:translate(-50%,-50%)让矩形始终保持在视口中心，即使部分区域被裁剪，视觉上依然是居中的铺满效果。

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