web图片100%宽度自适应,高度不塌陷
2024-08-26 07:54:38
一般在web端图片100%自适应,在页面加载的时候存在高度塌陷的问题
解决这个问题其实很简单,用padding-top设置百分比值来实现自适应,公式如下
padding-top = (Image Height / Image Width) * 100%
如:图片宽400px,高200px;套用上面公式计算出padding-top:值是50%;
HTML代码
<div class="cover">
<img src="data:images/test.jpg" alt=""/>
</div> .cover{position: relative; padding-top:50%; height: 0; overflow: hidden;}
.cover img{position: absolute; top: 0; width: 100%;}
最新文章
- 由12306动态验证码想到的ASP.NET实现动态GIF验证码(附源码)
- jQuery 3.0正式发布
- 网络IPC:套接字之套接字描述符
- 【Socket计划】使用C++实现Server结束Client结束
- 获取星座的JS函数
- [leetcode-496-Next Greater Element I]
- 使用jersey 注解包扫描类PackageNamesScanner
- Xamarin.Android 使用Timer 并更改UI
- 【Java】静态代码块使用
- 三层登录实例VB.NET版详解---理论加实战篇
- UED团队规范设计参考及建议
- stream流操作List工具类
- ATM实验感受
- VScode 1.13 gocode提示dial tcp 216.239.37.1:443: connectex: A connection attempt failed because the connected..
- ES6_函数方法
- 使用digitalocean进行项目开发
- centos 6.9 +nginx 配置GIT HTTPS服务器(证书采用自签名)
- list(列表)操作【五】
- 160309、Spring AOP操作action时无法注入,报空指针错误
- [使用教程]cocostudio之UI编辑器动画模式