怎样改变图片在浏览器上的显示大小？

hlddn 2003-09-02 10:25:10

例如上传的图片本身为800*600的话，想让它在浏览器上显示为比如80*60，该怎样实现？

...全文

477 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

feel8 2003-09-03

打赏
举报

<img src="./images/logo.gif" width="741" height="80">

width,height后面的数字设一下就行了

hlddn 2003-09-03

打赏
举报

我希望的是不改变文件本身的大小，只是在显示的时候用缩略图来显示。该怎样实现？

feel8 2003-09-02

打赏
举报

PHP中大图缩小图的程序实例：（在WINDOWS和LINUX平台都调试通过了。）
1）上传图片页面：（片段）
在<head></head>中间加入下面程序，（这段程序很有用，可以在前台，用户端判断用户上传的文件类型，控制用户的上传文件）
<script language="JavaScript">


页面中加入上传表单：
<FORM ENCTYPE="multipart/form-data" ACTION="photo_upload2.php" METHOD="POST" onsubmit="return CheckForm(this)">
注：请先上传照片，后填下表。第一张为封面照片，只能传jpg图片，小于300K,少于9张。
<p class="big"> 上传照片：</p>
<input type="file" name="zhaopian_up" size="20"> <INPUT TYPE="submit" value="上传">
</form>

2）处理页面程序，包含判断图片大小，上传拷贝，缩图，生成小图文件，图片ID存入数据库等：（片段）
<?
//取得上传文件大小,300K：
if ($zhaopian_up_size>307200) {
$wrong_massage="对不起，你上传的文件大小超过了300K，请缩小图再传！";
Header("Location:include/wrong_massage.php?wrong_massage=$wrong_massage");
exit();
}
//自动缩图$srcFile原文件，大图；$photo_small目标文件，小图；$dstW,$dstH是小图的宽，高。
function makethumb($srcFile,$photo_small,$dstW,$dstH) {
$data = GetImageSize($srcFile,&$info);
switch ($data[[2]]) {
case 1: //图片类型，1是GIF图
$im = @ImageCreateFromGIF($srcFile);
break;
case 2: //图片类型，2是JPG图
$im = @imagecreatefromjpeg($srcFile);
break;
case 3: //图片类型，3是PNG图
$im = @ImageCreateFromPNG($srcFile);
break;
}
$srcW=ImageSX($im);
$srcH=ImageSY($im);
$ni=ImageCreate($dstW,$dstH);
ImageCopyResized($ni,$im,0,0,0,0,$dstW,$dstH,$srcW,$srcH);
ImageJpeg($ni,$photo_small);
//ImageJpeg($ni); //在显示图片时用，把注释取消，可以直接在页面显示出图片。
}
$srcFile=$zhaopian_up;
//取得文件扩展名：
$type=substr(strrchr($zhaopian_up_name,"."),1);
$photo_ID=time();
$photo_path="user_picture/$user/";
if(is_dir($photo_path)!=TRUE) mkdir($photo_path,0777);
$photo_small=$photo_path."/".$photo_ID."_s.".$type; //小图
$photo_s=fopen($photo_small,"w+");
if ($type=="png" || $type=="jpg") makethumb($srcFile,$photo_small,110,130);//110,130为小图宽，高
?>

在显示图片的程序中，只需从数据库中读出图片ID，用$photo_path."/".$photo_ID."_s.".$type就是显示小图，加个链接，就可以显示大图$photo_path."/".$photo_ID.".".$type;

feel8 2003-09-02

打赏
举报

不推荐的方法是限制图片的宽度，htm中。这样虽然变小了，但是大小是不变的。
推荐使用gd库缩小图片。

用GD库生成高质量的缩略图片

<?

$FILENAME="image_name";

// 生成图片的宽度
$RESIZEWIDTH=400;

// 生成图片的高度
$RESIZEHEIGHT=400;

function ResizeImage($im,$maxwidth,$maxheight,$name){
$width = imagesx($im);
$height = imagesy($im);
if(($maxwidth && $width > $maxwidth) || ($maxheight && $height > $maxheight)){
if($maxwidth && $width > $maxwidth){
$widthratio = $maxwidth/$width;
$RESIZEWIDTH=true;
}
if($maxheight && $height > $maxheight){
$heightratio = $maxheight/$height;
$RESIZEHEIGHT=true;
}
if($RESIZEWIDTH && $RESIZEHEIGHT){
if($widthratio < $heightratio){
$ratio = $widthratio;
}else{
$ratio = $heightratio;
}
}elseif($RESIZEWIDTH){
$ratio = $widthratio;
}elseif($RESIZEHEIGHT){
$ratio = $heightratio;
}
$newwidth = $width * $ratio;
$newheight = $height * $ratio;
if(function_exists("imagecopyresampled")){
$newim = imagecreatetruecolor($newwidth, $newheight);
imagecopyresampled($newim, $im, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
}else{
$newim = imagecreate($newwidth, $newheight);
imagecopyresized($newim, $im, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
}
ImageJpeg ($newim,$name . ".jpg");
ImageDestroy ($newim);
}else{
ImageJpeg ($im,$name . ".jpg");
}
}

if($_FILES['image']['size']){
if($_FILES['image']['type'] == "image/pjpeg"){
$im = imagecreatefromjpeg($_FILES['image']['tmp_name']);
}elseif($_FILES['image']['type'] == "image/x-png"){
$im = imagecreatefrompng($_FILES['image']['tmp_name']);
}elseif($_FILES['image']['type'] == "image/gif"){
$im = imagecreatefromgif($_FILES['image']['tmp_name']);
}
if($im){
if(file_exists("$FILENAME.jpg")){
unlink("$FILENAME.jpg");
}
ResizeImage($im,$RESIZEWIDTH,$RESIZEHEIGHT,$FILENAME);
ImageDestroy ($im);
}
}

?>

<img src="<? echo($FILENAME.".jpg?reload=".rand(0,999999)); ?>"><br><br>

<form enctype="multipart/form-data" method="post">
<br>
<input type="file" name="image" size="50" value="浏览"><p>
<input type="submit" value="上传图片">
</form>

</body>
</html>