【回顾】CSS实现宽高比自适应容器
时间：2023-03-31 13:55:28
CSS
最近在开发手机页面的时候，遇到这样的情况：当页面宽度为100%时，高度是宽度的一半，仍然是宽度的一半手机宽度变化。所以我们需要实现一个宽度自适应的容器，它的高度是宽度的一半。这里以高度为宽度的一半为例，也可以是其他比例。1、思考这个问题如何实现类似于：我们在移动端页面有一张宽度为100%的图片。如果我们不设置高度，图片会按照原来的大小按比例缩放。我们可以利用这个思路，根据元素的高度，为元素设置一个对应的比例高度。2.实现方法1——实现所谓的视口单位（viewportunits）相对于视口（viewport）的大小，100vw等于100%的视口宽度，即1vw等于视口的1宽度％。我们可以利用这个特性在移动端实现宽高比自适应容器。HTML代码：
CSS代码：*{margin:0;填充：0}。盒子{宽度：100%;高度：51.5vw}.boximg{宽度：100%;}为什么.box的高度是51.5vw？原因是图片原始大小为884*455纵横比，即455/884=51.5%。与原始图片缩放相比，这种方式有一个优点：无论图片是否加载成功，始终计算容器的高度，不会造成页面抖动或页面重绘，从而提高性能。我们来看看本例中图片加载成功与失败的对比：三、实现方式二——通过子元素padding实现是通过设置子元素的padding属性来实现的，比较常用和有更好的效果。这里需要理解的是：子元素的padding属性百分比的取值首先是相对于父容器的宽度。看下面的代码和效果图来理解：HTML代码：
我是王平安，pingan8787 