欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS图片高度自适应

程序员文章站 2022-05-01 11:34:33
...

通过这样写css,可以直接获取图片高度,而不用等到图片加载出再获得。

position: relative;
width: 100%;
height: 0;
padding-top: 70%;
transfrom-origin: top;
background-size: cover;

通过 width:100%padding-top:70%控制图片的宽高比为10:7,当页面加载时,宽度确定了,高度也就确定了。

图片宽度设置100%,页面加载时会存在高度塌陷的问题,可以使用padding-top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100。

相关标签: CSS css