CSS 宽高比计算器

宽高比描述元素宽度与高度之间的比例关系，通常写成由冒号分隔的两个数，例如 16:9。两边按相同倍数缩放时，比例保持不变。网页开发者用宽高比为图片、视频、嵌入内容、卡片及响应式组件预留稳定空间，避免内容加载完成前布局不稳。本计算器可化简任意一对整数尺寸，并生成对应的现代 CSS 声明。 化简使用宽度和高度的最大公约数。对于 1920 × 1080，最大公约数是 120，两边除以 120 得到 16 × 9。小数比例为宽度除以高度，因此 16:9 约等于 1.7778。CSS 的 aspect-ratio 属性既接受最简数值，也接受原始尺寸，但最简形式更方便识别和检查。生成的声明可粘贴到图片容器、视频框架、网格项或其他盒子的样式规则中。 aspect-ratio 属性提供的是首选比例。若元素宽度确定、高度自动，浏览器会根据比例推导高度；若高度确定、宽度自动，则可反推宽度。当两个尺寸都显式固定时，比例不会覆盖它们。内容、最小尺寸、最大尺寸、盒模型及布局约束也会影响最终渲染尺寸。将 width: 100% 与宽高比搭配，是创建响应式媒体容器的常见方式。 宽高比不等于分辨率。两张图片都可以是 16:9，但像素数量相差很大，例如 1280 × 720 与 3840 × 2160。比例决定形状，分辨率则影响细节、文件大小和显示密度。裁剪成新比例会移除部分内容；将图片完整放入不同形状的盒子，则可能留下空白。CSS 的 object-fit 值（如 cover 和 contain）决定替换内容在预留盒子中的呈现方式。 为了避免布局偏移，请使用源资源报告的固有尺寸。即使响应式 CSS 改变了显示尺寸，HTML 的 width 和 height 属性仍能让浏览器推导比例。对于按构图选择的图片或特殊断点，请确认每个选用源图都符合预期构图。由于只关心比例，本计算器支持任意统一单位；但要求整数输入，以确保最大公约数计算精确，得到简洁、可预测的比例。