如何保持容器固定宽高比

概述

在播放视频和图片的时候，为了保持其内容不变形，就需要保持容器的固定宽高比

实现方法

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的方式

源码地址

传送门-Github

有过有其它更好的方式欢迎留言/提pr。

posted @ 2022-10-24 19:14  _zhiqiu  阅读(53)  评论(0)  编辑  收藏  举报