个容器等比缩放到另一个容器里面
方法 1：使用 CSS object-fit
如果是要将一个内容（例如图片或视频）等比缩放，可以使用 object-fit。
<div class="outer-container">
<img src="your-image.jpg" class="inner-content" />
</div>
.outer-container {
width: 300px; /* 外容器宽度 */
height: 200px; /* 外容器高度 */
overflow: hidden;
position: relative;
}
.inner-content {
width: 100%;
height: 100%;
object-fit: contain; /* 等比缩放，内容完全显示在容器内 */
}
说明：
object-fit: contain确保内容等比缩放并完全适配容器。如果是
object-fit: cover，则内容等比缩放，可能会裁剪超出的部分。
方法 2：使用 CSS aspect-ratio
如果需要整个容器（比如 div）保持等比缩放，可以用 aspect-ratio。
<div class="outer-container">
<div class="inner-container"></div>
</div>
.outer-container {
width: 300px; /* 外容器宽度 */
height: 200px; /* 外容器高度 */
overflow: hidden;
position: relative;
}
.inner-container {
aspect-ratio: 16 / 9; /* 容器的宽高比 */
width: 100%; /* 填满父容器宽度 */
background: lightblue; /* 内容器背景颜色 */
}
aspect-ratio 自动计算高度以保持比例。
方法 3：使用 JavaScript 动态调整
如果容器比例需要动态计算（例如根据窗口大小），可以用 JavaScript。
<div class="outer-container">
<div class="inner-container"></div>
</div>
.outer-container {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container {
background: lightcoral;
position: absolute;
top: 0;
left: 0;
}
function resizeInnerContainer() {
const outer = document.querySelector('.outer-container');
const inner = document.querySelector('.inner-container');
const outerWidth = outer.offsetWidth;
const outerHeight = outer.offsetHeight;
const aspectRatio = 16 / 9; // 假设目标宽高比为 16:9
if (outerWidth / outerHeight > aspectRatio) {
// 宽度限制条件
inner.style.width = '100%';
inner.style.height = `${(1 / aspectRatio) * 100}%`;
} else {
// 高度限制条件
inner.style.height = '100%';
inner.style.width = `${aspectRatio * 100}%`;
}
}
window.addEventListener('resize', resizeInnerContainer);
resizeInnerContainer(); // 初次运行
