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计算图片自适应宽高算法实现的更多相关文章

  1. iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  2. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  3. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  4. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  5. OpenGL ES学习笔记(二)——平滑着色、自适应宽高及三维图像生成

    首先申明下,本文为笔者学习<OpenGL ES应用开发实践指南(Android卷)>的笔记,涉及的代码均出自原书,如有需要,请到原书指定源码地址下载. <Android学习笔记--O ...

  6. UILabel实现自适应宽高需要注意的地方(三)

        一.需求图如下所示    UILabel 的高度自适应 UILabel中的段落间距可设置   图片效果如下:   调整段落适应长宽高方式:         需求:   保证"游戏玩法 ...

  7. iOS学习-压缩图片(改变图片的宽高)

    压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...

  8. RT/Metro商店应用如何如何获取图片的宽高

    RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...

  9. java读取远程url图片,得到宽高

    链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrb6.html import java.io.IOException;import java.awt ...

随机推荐

  1. Unity官方实例教程 Roll-a-Ball

    与unity的transform组件相处的挺久了,最近项目不太忙,决定好好打下unity的基础.那么从Roll-a-Ball这个简单游戏开始吧! 1.先创建一个球体游戏对象,改名为Player,tra ...

  2. 用rem做响应式开发

    设置对应的响应式的html rem比例 rem就是根元素(即:html)的字体大小.html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-s ...

  3. MySQL报错】ERROR 1558 (HY000): Column count of mysql.user is wrong. Expected 43, found 39.

    之前在centos6.4系统安装的是自带的mysql 5.1版本,后来升级到了5.6版本,执行以下命令报错 在网上查找原因说说因为升级不当导致,执行以下命令即可正常执行命令 mysql_upgrade ...

  4. [洛谷P4491] [HAOI2018]染色

    洛谷题目链接:[HAOI2018]染色 题目背景 HAOI2018 Round2 第二题 题目描述 为了报答小 C 的苹果, 小 G 打算送给热爱美术的小 C 一块画布, 这块画布可 以抽象为一个长度 ...

  5. spring框架学习(八)spring管理事务方式之注解配置

    1.DAO AccountDao.java package cn.mf.dao; public interface AccountDao { //加钱 void increaseMoney(Integ ...

  6. BFS 两个重要性质

    对于进行广度优先搜索的队列中,应该始终满足两个性质:   性质1:若队首为第i层拓展到的节点,则队列中最多只能存在第i层和第i+1层的节点,不可能出现3层节点.   性质2:队列中的元素会严格按照层数 ...

  7. 【leetcode 简单】 第六十一题 存在重复元素

    给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [1,2,3,1] 输出: true ...

  8. Happy Matt Friends(HDU5119 + dp)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5119 题目: 题意: 求选择任意个数,使其异或和大于等于m的方案数. 思路: 每个数有选和不选两种方 ...

  9. HDU 4370 0 or 1 (最短路)

    [题目链接](http://acm.hdu.edu.cn/showproblem.ph Problem Description Given a n/n matrix Cij (1<=i,j< ...

  10. 外卖(food) & 洛谷4040宅男计划 三分套二分&贪心

    food评测传送门 [题目描述] 叫外卖是一个技术活,宅男宅女们一直面对着一个很大的矛盾,如何以有限的金钱在宿舍宅得尽量久.    外卖店一共有 N 种食物,每种食物有固定的价钱 Pi 与保质期 Si ...