js和php计算图片自适应宽高算法实现
js Code:
<script>
$width = $(imgobj).width(); //图原始宽
$newheight = $(imgobj).height(); //图原始高
$w = 693; //最小宽度
$h = 840; //最大宽度
//计算图片比例高度
$A=$w / $h;
$A1=$width/$newheight;
if($A1>$A){
$width=$w;
$newheight=$w/$A1;
}else if($A1<$A){
$height=$h;
$width=$h*$A1;
}else if($A1==$A){
$width=$w;
$newheight=$h;
}
$width = parseInt($width);//得到的自适应宽度
$newheight = parseInt($newheight); //得到的自适应高度
</script>
说明:
设容器宽为W,高为H,则宽高比例为W/H=A;
设被加载图片宽为W',高为H',则被加载图片宽高为W'/H'=A';
设修正后的被加载图片宽为W'',高为H''。
结论:
若被加载图片相对容器更宽,更矮:
即当A' > A时,W'' = W, H'' = W / A';
若被加载图片相对容器更高,更窄:
即当A' < A时,H'' = H, W'' = H * A';
若被加载图片宽高比与容器相当:
即当A' = A时,W'' = W, H'' = H。
php Code:
// src:原图地址
// w:需要显示的宽
// h:需要显示的高
public static function imageSize_tag($src,$w,$h){
$src='img.jpg';
$w = 693;
$h = 840;
$src = $_SERVER['DOCUMENT_ROOT'].$src;
$img = getimagesize($src);
$width = $img[0];
$height = $img[1]; $A=$w / $h;
$A1=$width/$height;
if($A1>$A){
$width=$w;
$height=$w/$A1;
}
else if($A1<$A){
$height=$h;
$width=$h*$A1;
}
else if($A1==$A){
$width=$w;
$height=$h;
}
return "<img src='$src' height='$height' width='$width' />";
}
js和php计算图片自适应宽高算法实现的更多相关文章
- iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;
最终效果图: 一.轮播图中图片自适应宽高: <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- OpenGL ES学习笔记(二)——平滑着色、自适应宽高及三维图像生成
首先申明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. <Android学习笔记--O ...
- UILabel实现自适应宽高需要注意的地方(三)
一.需求图如下所示 UILabel 的高度自适应 UILabel中的段落间距可设置 图片效果如下: 调整段落适应长宽高方式: 需求: 保证"游戏玩法 ...
- iOS学习-压缩图片(改变图片的宽高)
压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...
- RT/Metro商店应用如何如何获取图片的宽高
RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...
- java读取远程url图片,得到宽高
链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrb6.html import java.io.IOException;import java.awt ...
随机推荐
- 【实操笔记】MySQL主从同步功能实现
写在前边: 这两天来了个需求,配置部署两台服务器的MySQL数据同步,折腾了两天查了很多相关资料,一直连不上,后来发现其实是数据库授权的ip有问题,我们用的服务器是机房中的虚拟机加上反向代理出来的,坑 ...
- 对 jQuery 中 data 方法的误解
一直以来都认为新版本中 data 是调用 dataset 实现的,对于低版本IE则采用 getAttribute其实一直是我误解了,也不知道最初这个想法是怎么来的.难道我被盗梦了? 今天 谢亮 兄弟和 ...
- 用JS获得QQ号码的昵称,头像,生日
有一个网址,可以返回我们要的内容. http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?uin=指定QQ号码 将会返回下列内容: _Callbac ...
- js鼠标自定移入输入框文本框光标自动定位到文本框
1.干货直接上 选中输入框设置如下: document.getElementById("Text1").focus();
- sklearn_模型遍历
# _*_ coding = utf_8 _*_ import matplotlib.pyplot as plt import seaborn as sns import pandas as pd f ...
- Shell基础-通配符
* - 通配符,代表任意字符 ? - 通配符,代表一个字符 # - 注释 | - 分隔两个管线命令的界定 ; - 连续性命令的界定 ~ - 用户的根目录 $ - 变量前需要加的变量值 ! - 逻辑运算 ...
- UNIX环境高级编程 第10章 信号
SIGSTOP和SIGKILL区别是:前者是使进程暂时停止,即中止,也就是说使进程暂停,将进程挂起,比如你在终端里面执行一个脚本或者程序,执行到一半,你想暂停一下,你按下ctrl+z,就会导致终端发送 ...
- 【NOI题解】【bzoj题解】NOI2008 bzoj1063 道路设计
@ACMLCZH学长出的毒瘤题T3.再也不是“善良”的出题人了. 题意:bzoj. 题解: 经典的树形DP题目,屡见不鲜了,然而我还是没有写出来. 这一类的题目有很多,例如这里的C题. 主要套路是把对 ...
- 【算法学习】老算法,新姿势,STL——Heap
“堆”是一个大家很熟悉的数据结构,它可以在\(O(log\;n)\)的时间内维护集合的极值. 这都是老套路了,具体的内部实现我也就不谈了. 我一般来说,都是用queue库中的priority_queu ...
- linux调试工具glibc的演示分析
偶然中发现,下面的两端代码表现不一样 void main(){ void* p1 = malloc(32); free(p1); free(p1); // 这里会报double free ...