开发可能会遇到这样的需求：一个响应式页面，它的图片宽度随着页面尺寸的变化而变化，图片的高和宽必须保持一个固定的比例。（这里假设图片是一个![]()
元素，而不是作为背景，页面上显示的图片的纵横比不一定和图片本身的纵横比相同。）如果图片在移动端，图片的宽高是通过rem或者vm设置的就可以了，因为浏览器对于某个设备的宽高是可以确定的。在PC端，你可以随意改变浏览器的大小。如果要保证图片的宽高比，使用JS是一种方式。比较常见的方案是在图片外加一个容器，并设置高度为0.，然后用padding-top或者padding-bottom把盒子“抬高”，图片定位在容器的左上角，并且宽度和高度设置为100%，这有点hacky。.outer{位置：绝对；宽度：100%；底边距：56.25%；/*这里的宽高比是16:9*/...}.inner{position:absolute;顶部：0；左：0；宽度：100%；height:100%;}padding-bottom的值为(height/width)*100%，它的百分比是相对于框的宽度而不是高度。如果使用属性intrinsize很简单下面是对比，试着改变预览区的大小，可以看到图片是一样的https://jsbin。com/zoxixiwefa/...最常用的场景是卡片式图片列表。比如下面是一个直播平台的列表页，省略了一些CSS。分割线使用平台采用的paddingscheme，分割线使用intrinsicsize属性。.https://jsbin.com/zazajazige/…
