当前位置:
  1. 首页 »
  2. 笔记 »
  3. 正文

自适应纯CSS图片宽度高度始终保持比例

零分 458

自适应例如九宫格,图片或者DIV特别是图片宽度100%,如何让高度也能始终保持一个比例?避免出现高低不齐的现象!

1、利用JS控制,监听图片的宽度,再设置图片的高度

2、纯CSS设置图片宽度和高度始终保持比例

2.1、原理:利用padding-top(padding-bottom)的百分比计算是根据层宽度的宽度计算的,如层宽度100px,padding-top:20%就是20px;设置一个外层padding-top(padding-bottom)的空白空间,让内层去填充!如设置一个始终保持正方形的图片,将父层设置padding-top(padding-bottom)100%,宽度100%,高0,得到一个正方形空白空间,内层图片标签img设置position:absolute浮动左0,顶部0,高度100%,宽度100%(图片的高度宽度百分比是根据父层计算!) 填满父层padding出来的正方形空白空间!

2.2、实例:给img加一个父层imgbox

<div class="imgbox">
<img src="imgurl">
</div>

2.3、添加CSS

.imgbox{
position: relative;
width: 100%;
height: 0px;
padding-top: 100%; //padding-bottom都可以
}

.imgbox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
标签:

自适应调试手机端(无线端)网页样式布局的方法

自适应手机端样式调试方式: 1、调整浏览器大小(不推荐,通过CSS布局无线端自适应) 2、下载相关工具,如微信公众号开发工具 3、审查浏览器,切换到手机(推荐) 首先右键网页(检查或者审查元素,快捷键F12),点亮手机图标 点亮后
教程 2,362

记一次网页源码顶部空白行的问题处理

正常来说,网页源码顶部如非UFT-8 bom编码的问题,基本不会影响网站的正常运行,但如php生成xml的话,就会出现问题。 因更换了主题(新主题暂时未上线,只是测试),发现xml无法正常显示,查看源码,顶部多出了一行空白行,本地运行正常。 查找原因,基本每个PHP问题都排查了,未发现任何问题,将主题上传到另外一个网站运行,发现正常。基本可以排除是主题的原因,剩下的可能是插件的问题。 查看了插件的源码,发现真的是插件的问题,PHP插件文件底部多出了几行,删除多出的行,重新运行,空白行不见了! 记录下,防止下次又因同样的原因而花时间去排查!
笔记 2,261

wordpress禁用REST API导致古腾堡编辑器发布文章出错问题

wordpress禁用REST API,在function.php中加入以下代码: add_filter("json_enabled", "__return_false"); add_filter("json_jsonp_enabled", "__return_false"); add_filter("rest_enabled", "__return_false"); add_filter("rest_jsonp_enabled", "__return_false"); remove_action("init", "rest_api_init"); remove_action("rest_ap
笔记 1,104

wordpress 后台主题设置选项按钮(button、input submit)点击屏蔽提交事件禁止刷新

wordpress 后台主题设置选项按钮(button、input submit)点击屏蔽提交事件禁止刷新 如果在设计主题或者插件后台设置选项时,wordpress后台的按钮(button、input submit)默认是提交操作,如只是响应JS事件,需要屏蔽提交,防止页面刷新。e.preventDefault(); 完整示例: $("button.copy").on("click",function(e){ e.preventDefault(); JS操作 });
笔记 995

pr2020(Adobe Premiere Pro 2020),运行时提示不支持的视频驱动

首先说下,PR2020是大神的破解版,运行的时候有登录账号,点击了试用(记得以前登录不需要点试用)不知道是否能正常持续试用。 电脑系统是windows 11,之前是Windows10,想提样下Windows11 就升级到了Windows11,因为可能是因为笔记本不支持TMP2.0,用了绕过的方法安装了Windows11,所以需要重新安装PR 在运行PR的时候,提示不支持的视频驱动,通过驱动总裁也无法解决,之前就一直不理会使用。 在官网上看到,支持Game Ready 驱动程序。 NVIDIA 已停止发布适用于旧版 GPU(9 系列及更低版本)的 Studio 驱动程序。但是,最新的 Game
笔记 1,803