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

Zero零分 笔记 1,293 0 3年前

自适应例如九宫格,图片或者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%;
}
END

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

*

用户评论(0)

phpstudy phpmyadmin访问慢的问题解决方案

本地配置phpStudy环境phpMyAdmin运行速度慢,phpstudy phpmyadmin访问慢的问题解决方案 在phpmyadmin目录下\phpStudy\PHPTutorial\WWW\phpMyAdmin\libraries找到config.default.php 打开config.default.php搜索host或者localhost或者$cfg[‘Servers’][$i][‘host’] 将:$cfg['Servers'][$i]['host'] = 'localhost'; 修改位:$cfg['Servers'][$i]['host'] = '127.0.0.1'; 另外,顺便将程序链接数据库的localhost改为127.0.0.1将会提高程序的运行速度
笔记 ·

php foreach 循环跳过和退出

php foreach循环,当遇到某个条件跳过continue,和退出break。 continue,跳过,例 $array=array(1,2,3,4,5,6,7,8,9,10); foreach($array as $a){ if($a==5){ continue;//跳过 } echo $a."<br>------------------<br>"; } 当$a=5的时候,不输出,跳过,后面继续输出 结果: 1 ------------------ 2 ------------------ 3 ------------------ 4 ------------------ 6 ------------------ 7 ------------------ 8 ------------------ 9 ------------------ 10 ------------------ 当$a=5的时候终止循环,后面不再输出,如: foreach($array as $a){ if($a==5){ break;//退出循环 } echo $a."<br>------------------<br>"; } 结果: 1 ------------------ 2 ------------------ 3 ------------------ 4 ------------------ 一般应该是continue跳过用于过滤,break用于查找!
笔记 ·

PHP下载远程图片到本地服务器

最近在写一个东西,需要将远程的图片下载保存到本地服务器,测试了一段代码,已通过 function download($url, $save_dir = './______Images/upload/goods/',$filename=''){ $ext=strrchr($url,'.'); if(trim($save_dir)=='') $save_dir='./'; if(trim($filename)==''){//保存文件名 $allowExt = array('gif', 'jpg', 'jpeg', 'png', 'bmp'); if(!in_array($ext,$allowExt)) return false; // return array('file_name'=>'','save_path'=>'','error'=>3); $filename=time().$ext; } if(0!==strrpos($save_dir,'/')) $save_dir.='/'; //创建保存目录 if(!file_exists($save_dir)&&!mkdir($save_dir,0777,true)) return false; // return array('file_name'=>'','save_path'=>'','error'=>5); $ch = curl_init(); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 信任任何证书 curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30); $file = curl_exec($ch); curl_close($ch); $filename = $filename.$ext; $resource = fopen($save_dir . $filename, 'a'); fwrite($resource, $file); fclose($resource); unset($file,$url); return true; // return array('file_name'=>$filename,'save_path'=>$save_dir.$filename,'error'=>0); } 因为要先判断是否下载成功,return 都改成了false和true,可以自行设置路径及文件名
笔记 ·

phpstudy phpmyadmin解决总是提示登录过期问题

phpstudy phpmyadmin 登录默认的过期时间是1440s,应该是24分钟,只要修改下过期时间就可以了。 修改文件phpStudy\WWW\phpMyAdmin\libraries下的config.default.php,修改参数:$cfg[‘LoginCookieValidity’] $cfg['LoginCookieValidity'] = 1440; 改为 $cfg['LoginCookieValidity'] = 86400; 一天 这样就算登录一天也不会提示登录过期的问题了
笔记 ·
Zero零分
站龄14年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
464
文章
36
评论
27
分类
819
标签
7
友链
onlinelovesky 317355746 122551965@qq.com

百度广告