在响应式布局中，使用纯 CSS 使块元素等比缩放，主要依靠 padding 的百分比值特性，以及 aspect-ratio 属性 (现代浏览器支持)。以下几种方法可以实现：
1. 使用 padding-top 或 padding-bottom:
这是最常用的方法，利用了 padding 百分比值是相对于父元素 宽度 计算的特性。
.container {
width: 50%; /* 或其他任何宽度设置 */
position: relative; /* 为绝对定位的子元素提供参考 */
}
.container .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 1:1 比例 */
.container.ratio-1-1 .content {
padding-top: 100%;
}
/* 16:9 比例 */
.container.ratio-16-9 .content {
padding-top: 56.25%; /* 9/16 * 100% */
}
/* 4:3 比例 */
.container.ratio-4-3 .content {
padding-top: 75%; /* 3/4 * 100% */
}
- 原理:
padding-top: 100%;表示顶部内边距为父元素宽度的 100%，从而使元素高度等于宽度，实现 1:1 的比例。其他比例以此类推。 - 关键: 需要设置
position: relative;给父元素，以及position: absolute; top: 0; left: 0; width: 100%; height: 100%;给子元素，使子元素填充父元素的空间。
2. 使用 aspect-ratio (现代浏览器支持):
这是更现代化和直接的方法，可以更方便地设置宽高比。
.container {
width: 50%; /* 或其他任何宽度设置 */
}
.container.ratio-1-1 {
aspect-ratio: 1 / 1;
}
.container.ratio-16-9 {
aspect-ratio: 16 / 9;
}
.container.ratio-4-3 {
aspect-ratio: 4 / 3;
}
- 原理:
aspect-ratio属性直接定义了元素的宽高比。 - 优势: 更简洁，无需额外的嵌套和定位。
- 兼容性: 需要考虑浏览器兼容性，对于不支持的浏览器，可以结合第一种方法作为 fallback。
3. 使用 vw 单位 (视口宽度):
这种方法可以根据视口宽度来设置高度，实现等比缩放，但比例是相对于视口的，而不是父元素。
.container {
width: 50%; /* 或其他任何宽度设置 */
}
.container.ratio-1-1 {
height: 50vw; /* 假设容器宽度也是 50vw */
}
- 原理:
vw表示视口宽度的百分比。 - 限制: 比例是相对于视口的，如果父元素宽度不是视口宽度的某个固定比例，则无法实现精确的等比缩放。
选择哪种方法？
- 优先使用
aspect-ratio，因为它更简洁和直接。 - 如果需要兼容旧版浏览器，或者
aspect-ratio无法满足需求，则使用padding-top方法。 - 避免使用
vw单位，除非你明确需要根据视口宽度进行缩放。
示例 (使用 aspect-ratio):
<!DOCTYPE html>
<html>
<head>
<title>Aspect Ratio Example</title>
<style>
.container {
width: 50%;
background-color: lightblue;
margin: 20px auto;
}
.ratio-1-1 {
aspect-ratio: 1 / 1;
}
.ratio-16-9 {
aspect-ratio: 16 / 9;
}
</style>
</head>
<body>
<div class="container ratio-1-1">1:1 Aspect Ratio</div>
<div class="container ratio-16-9">16:9 Aspect Ratio</div>