实现图片恒定宽高比的属性 — intrinsicsize

时间 2019-11-05

标签实现图片恒定属性 intrinsicsize 繁體版

原文原文链接

开发中可能会遇到这样的需求：一个响应式页面，它的图片宽度是随页面大小变化的，而且图片高度和宽度要保持固定的比率。（这里假设图片是<img>元素，不是做为background，页面上要显示图片的宽高比与图片自己的宽高比并不必定相同。）css

若是在移动端，图片经过rem或vm来设置宽高度就能够了，由于对于肯定的设备浏览器的宽高是能够肯定的。html

而在PC端，能够随意的改变浏览器的大小，若是要保证图片的宽高比，用JS是一种方法，更常见的解决方案是在图片外层新增一个容器，并设置height为0，而后利用padding-top或padding-bottom来把盒子“撑高”，图片定位于容器左上角，宽高设为100%，有点hack的味道。浏览器

.outer {
  position: absolute;
  width: 100%;
  padding-bottom: 56.25%; /* 这里宽高比为16:9 */
  ...
}

.inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

padding-bottom的值即 (高度 / 宽度) * 100%，它的百分比是相对于盒子的宽度而不是高度。code

若是使用属性intrinsicsize就很简单了htm

<img src="..." intrinsicsize="16x9" />

下面是对比，试着改变预览区大小，能够看到图片的变化是同样的
https://jsbin.com/zoxixiwefa/...图片

比较经常使用的场景是卡片式图片列表，好比下面是某直播平台的列表页，省略了一些CSS，分割线上是平台采用的padding方案，分割线下是用intrinsicsize属性实现。开发

https://jsbin.com/zazajazige/...rem