概述
在播放视频和图片的时候，为了保持其内容不变形，就需要保持容器的固定宽高比
实现方法
1、使用新 css 属性 aspect-ratio
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aspect-radio</title>
<link rel="stylesheet" href="/main.css">
<style>
.wrap {
width: 80vw;
aspect-ratio: 16/9;
background-color: brown;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
2、使用 css 函数 calc 计算方法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aspect-radio</title>
<link rel="stylesheet" href="/main.css">
<style>
.wrap {
width: 80vw;
background-color: blue;
height: calc(80vw / 16 * 9);
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
此方式需要浏览器支持
calc，calc函数的支持还不错
3、使用js动态计算
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aspect-radio</title>
<link rel="stylesheet" href="/main.css">
<style>
.wrap {
width: 80vw;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
<script>
const resize = () => {
const wrapJs = document.querySelector('.wrap-js');
const wrapJsStyle = getComputedStyle(wrapJs);
const wrapJsWidth = wrapJsStyle['width'];
const height = parseFloat(wrapJsWidth) / 16 * 9;
wrapJs.style.height = `${
height}px`;
}
window.addEventListener('resize', () => {
requestAnimationFrame(resize);
})
resize() // 给元素设置初始高度，建议使用css设置
</script>
</html>
此方式兼容性最好，如果需要兼容低版本浏览器可以使用js的方式
源码地址
有过有其它更好的方式欢迎留言/提pr。
