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 ...
随机推荐
- Redis 3.2.8集群+Sentinel部署
Redis3.2.8集群搭建 采用官方推荐的三主三从分片方案,本例中所有节点部署在一台主机上. 软件安装: tar zxvf redis-3.2.8.tar.gz cd redis-3.2.8 ma ...
- ubuntu16.04下caffe以cpu运行faster rcnn demo
参考https://haoyu.love/blog404.html 获取并修改代码 首先,我们需要获取源代码: git clone --recursive https://github.com/rbg ...
- 蓝桥杯 算法提高 学霸的迷宫 经典BFS问题
算法提高 学霸的迷宫 时间限制:1.0s 内存限制:256.0MB 问题描述 学霸抢走了大家的作业,班长为了帮同学们找回作业,决定去找学霸决斗.但学霸为了不要别人打扰,住在一个城 ...
- AT1983 BBQ Hard
洛谷题目链接:BBQ Hard 题意翻译 有 n 个数对 \((A_i; B_i)\),求出 \[\sum_{i=1}^{n}\sum_{j=i + 1}^{n}{a_i+b_i+a_j+b_j ...
- 【转】Elastic日报 第576期 (2019-04-05)
1.Elasticsearch性能测试实践http://t.cn/EiRzFiI2.监控Elasticsearch的插件推荐http://t.cn/EiRzFix3.支持机器数据的可扩展Elastic ...
- javascript 中的类数组和数组
什么是类数组呢? 我们先来看一段代码: function fn() { console.dir(arguments); } fn(1,2,3,4,5,6,7,8,9,10); 这段代码的执行后,在 c ...
- 【FCS NOI2018】福建省冬摸鱼笔记 day5
第五天,也是讲课的最后一天. 数据结构专题,讲师:杨志灿 他的blog我似乎找不到了……以前肯定是在百度博客里面.但是现在百度博客消失了. PPT做的很有感觉,说了很多实用的技巧. 我觉得其实是收获最 ...
- C# WebClient、 jsonp实现跨域
WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...
- 使用RegSetValueEx修改注册表时遇到的问题(转)
原文转自 http://blog.csdn.net/tracyzhongcf/article/details/4076870 1.今天在使用RegSetValueEx时发现一个问题: RegSetVa ...
- 4 - django-orm基本使用
目录 1 数据库与ORM 2 orm的配置 2.1 引擎和配置 2.2 mysql驱动程序 3 orm 表模型 3.1 创建表对象 3.2 Django字段类型 3.3 常用字段参数说明 3.4 特殊 ...