如何保持容器固定宽高比

原创

Fly丶知秋 2023-03-06 03:46:02 ©著作权

文章标签 aspect-ratio css html 播放视频 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者Fly丶知秋的原创作品，请联系作者获取转载授权，否则将追究法律责任

概述

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

实现方法

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>