开发中可能会遇到这样的需求:一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。(这里假设图片是<img>
元素,不是作为background
,页面上要显示图片的宽高比与图片本身的宽高比并不一定相同。)
如果在移动端,图片通过rem
或vm
来设置宽高度就可以了,因为对于确定的设备浏览器的宽高是可以确定的。
而在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%
,它的百分比是相对于盒子的宽度而不是高度。
如果使用属性intrinsicsize
就很简单了
<img src="..." intrinsicsize="16x9" />
下面是对比,试着改变预览区大小,可以看到图片的变化是一样的
https://jsbin.com/zoxixiwefa/...
比较常用的场景是卡片式图片列表,比如下面是某直播平台的列表页,省略了一些CSS,分割线上是平台采用的padding
方案,分割线下是用intrinsicsize
属性实现。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。