Tailwind CSS如何在宽屏下保持2:3竖向div宽高比不超屏

原有写法失效原因 #

旧代码使用的aspect-w-2 aspect-h-3是Tailwind旧版比例插件基于padding-bottom的hack实现，只能根据元素宽度单向计算高度，无法响应高度上限约束，直接加max-h-full只会截断高度，无法同步调整宽度，必然会破坏宽高比。

可直接复用的实现代码 #

使用Tailwind 3+原生支持的aspect-*工具类即可满足需求，代码如下：

<div className="aspect-[2/3] w-full max-h-[100vh] mx-auto">
  {/* 插入你的div内部内容 */}
</div>

各属性作用说明 #

• aspect-[2/3]：强制元素始终保持宽:高=2:3的固定比例，浏览器会自动根据某一边的约束值计算另一边的合法尺寸，不会出现比例错乱
• w-full：窄屏/小屏场景下宽度撑满父容器，高度自动按比例计算，和原有小屏表现完全一致
• max-h-[100vh]：设置元素高度上限为浏览器视口高度，不建议使用max-h-full，该值依赖父元素高度计算，若父元素未设置视口级高度约束会导致限高失效。如果页面有固定头部、全局边距，可根据实际布局调整该值，例如有80px高的固定头部时可写为max-h-[calc(100vh-80px)]
• mx-auto：超宽屏场景下元素因触达高度上限自动收缩宽度时，让元素在父容器内水平居中，和参考示例效果一致

兼容方案 #

如果项目使用的是低于3.0版本的Tailwind，无法使用原生aspect工具类，可直接写自定义CSS实现相同效果：

.fixed-ratio-box {
  aspect-ratio: 2 / 3;
  width: 100%;
  max-height: 100vh;
  margin: 0 auto;
}

之后在div上引用该类名即可。

效果表现 #

• 屏幕宽度较小时：div宽度撑满可用空间，高度按2:3比例自动计算，无异常
• 屏幕宽度过大时：当按宽度计算出的高度超过视口高度上限，div高度会锁定在设置的max-h值，宽度同步按2:3比例收缩，不会超出屏幕可视范围，比例始终保持正确

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