CSS实现宽度自适应100%，宽高16:9的比例的矩形。

最新推荐文章于 2023-09-12 10:37:51 发布

小滕很久没锻炼

最新推荐文章于 2023-09-12 10:37:51 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/weixin_43581047/article/details/103911105

版权

CSS：

/* box 用来控制宽度 */
                .box {
                    width: 20%;
                }
                .scale {
                    width: 100%;
                    height: 0px;
                    /* scale 用来实现宽高等比例 1:1 padding-bottom:100%; 4:3 padding-bottom:75%; 16:9 padding-bottom:56.25%; */
                    padding-bottom: 56.25%;
                    position: relative;
                    background-color: pink;
                }
                .box .scale .item {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    color: red;
                }

HTML：

			<body>
                <div class="box">
                    <div class="scale">
                        <div class="item">
                            <img src="">
                        </div>
                    </div>
                </div>
             </body>