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' />"; }