css容器长宽比

最新推荐文章于 2024-04-16 17:45:13 发布

大拿加拿大

最新推荐文章于 2024-04-16 17:45:13 发布

阅读量426

点赞数

文章标签： css

本文链接：https://blog.csdn.net/zgrbsbf/article/details/74932130

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            position: relative;
            width: 50vw;
            margin: 20px auto;
            background: orange;
            --aspect-ratio: 1;
        }

        .box > :first-child {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
        }

        .box::before {
            content: "";
            display: block;
            padding-bottom: calc(100% / (var(--aspect-ratio)));
        }

        section {
            display: grid;
            grid-template-columns: repeat(16, 6.25vw);
            grid-auto-rows: 6.25vw;
        }

        section div {
            grid-column: span 16;
            grid-row: span 9;
        }

        section iframe {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="box">
    <iframe src="https://www.youtube.com/embed/upPCohrJcbw?showinfo=0&modestbranding=1" frameborder="0"
            allowfullscreen=""></iframe>
</div>
<section>
    <div>
        <iframe src="https://www.youtube.com/embed/upPCohrJcbw?showinfo=0&modestbranding=1" frameborder="0"
                allowfullscreen=""></iframe>
    </div>

</section>
</body>
</html>