今天小编跟大家讲解下有关intrinsicsize实现图片恒定宽高比的属性 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关intrinsicsize实现图片恒定宽高比的属性 的相关资料，希望小伙伴们看了有所帮助。
开发中可能会遇到这样的需求：一个响应式页面，它的图片宽度是随页面大小变化的，并且图片高度和宽度要保持固定的比率。（这里假设图片是<img>元素，不是作为background，页面上要显示图片的宽高比与图片本身的宽高比并不一定相同。）
如果在移动端，图片通过rem或vm来设置宽高度就可以了，因为对于确定的设备浏览器的宽高是可以确定的。
而在PC端，可以随意的改变浏览器的大小，如果要保证图片的宽高比，用js是一种方法，更常见的解决方案是在图片外层新增一个容器，并设置height为0，然后利用padding-top或padding-bottom来把盒子“撑高”，图片定位于容器左上角，宽高设为100%，有点hack的味道。
.outer { position: absolute; width: 100%; padding-bottom: 56.25%; ...}.inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}padding-bottom的值即(高度 / 宽度) * 100%，它的百分比是相对于盒子的宽度而不是高度。
如果使用属性intrinsicsize就很简单了
<imgsrc="http://www.aidi.net.cn/article/detial/3645/..."intrinsicsize="16x9"/>下面是对比，试着改变预览区大小，可以看到图片的变化是一样的https://jsbin.com/zoxixiwefa/
比较常用的场景是卡片式图片列表，比如下面是某直播平台的列表页，省略了一些css，分割线上是平台采用的padding方案，分割线下是用intrinsicsize属性https://jsbin.com/zazajazige/
原文来自：https://segmentfault.com/a/1190000019437573
来源：爱蒂网
