遇到麻烦求高手

<?php
include("conn.php");
if(isset($_GET['page'])){
$page=$_GET['page'];
}else{
$page=1;
}
?>
        <?php
if($page)
$page_size=4;
$query="select * from chanpin";
$yue=mysql_query($query);
$message_count=mysql_num_rows($yue);
$page_count=ceil($message_count/$page_size);
$offset=($page-1)*$page_size;
$query="select * from chanpin where id order by id desc limit $offset, $page_size";
$arr=mysql_query($query,$conn);?>
<?php
while($result=mysql_fetch_array($arr)){
?>
    <tr align="center">
  <td width="38%">名字：<?php echo $result['name'] ;?> | 大小:<?php echo $result['size']; ?> </td><td width="15%" align="right" valign="top">上传时间：</td><td width="47%" align="left"><?php echo $result['shij'];?></td></tr>
    <tr align="center">
    <td><img src="<?php echo $result['lujing']; ?>" width="300" height="200" /></td>
    <td align="right" valign="middle">产品说明：</td><td align="left" valign="top"><?php echo $result['chanpsm']; ?></td>

  </tr>
    <?php
}
?
我这样调用图片是出来了但是图片失真了我应该如果处理呀？怎么样才能才能不要图片失真？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

img标签中设置了高宽固定为200x300px，导致图片变形？最简单的是去掉width、height属性，让图片以原始尺寸显示，如果要限制图片显示尺寸高度不能超过200、宽度不能超过300，并且保持原始高宽比例，可以用PHP或者JS获取图片原始尺寸，然后再设置相应的高度或宽度值。
width="300" height="200"
你限制了大小，当然会失真。
写了个JS处理方法，把这段代码放到head标签中试试。（没仔细调试，可能还存在问题，明天再看看）
<script type="text/javascript">
function getImgSize(img) {
var result = {};
var w = img.width;
var h = img.height;
if (w > 300) {
if (h <= 200) {
result.width = 300;
result.height = Math.ceil(parseInt(h) * 200 / 300);
}
else {
if (w / h == 1.5) {
result.width = 300;
result.height = 200;
}
else if (w / h > 1.5) {
result.width = 300;
result.height = 0;
}
else {
result.width = 0;
result.height = 200;
}
}
}
else {
if (h <= 200) {
result.width = w;
result.height = h;
}
else {
result.height = 200;
result.width = Math.ceil(parseInt(w) * 200 / h);
}
}
return result;
}
window.onload = function() {
var obj = document.getElementsByTagName('table')[0].getElementsByTagName('img');
for (var i = 0; i < obj.length; i ++) {
var wh = getImgSize(obj[i]);
if (wh.width > 0) obj[i].style.width = wh.width + 'px';
if (wh.height > 0) obj[i].style.width = wh.height + 'px';
}
}
</script>
别忘了去掉img标签中的width、height属性。
只需对 img 单边控制就能保持原来的比例list($width, $height) =  getimagesize($result['lujing']);//可能需对$result['lujing']中的路径做适当调整...<img src="<?php echo $result['lujing']; ?>" <?php echo $width>$height*1.5 ? 'width="300"' : 'height="200"' ?> />....使用 js 也是一样
<?php
$a_size = getimagesize('1.jpg');
print_r($a_size);
?>
利用该函数得到的结果去对控制图片的大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function getImgSize(img) {
    var result = {};
    var w = img.width;
    var h = img.height;
    if (w > 300) {
        if (h <= 200) {
            result.width = 300;
            result.height = Math.ceil(parseInt(h) * 200 / 300);
        }
        else {
            if (w / h == 1.5) {
                result.width = 300;
                result.height = 200;
            }
            else if (w / h > 1.5) {
                result.width = 300;
                result.height = 0;
            }
            else {
                result.width = 0;
                result.height = 200;
            }
        }
    }
    else {
        if (h <= 200) {
            result.width = w;
            result.height = h;
        }
        else {
            result.height = 200;
            result.width = Math.ceil(parseInt(w) * 200 / h);
        }
    }
    return result;
}
window.onload = function() {
    var obj = document.getElementsByTagName('table')[0].getElementsByTagName('img');
    for (var i = 0; i < obj.length; i ++) {
        var wh = getImgSize(obj[i]);
        if (wh.width > 0) obj[i].style.width = wh.width + 'px';
        if (wh.height > 0) obj[i].style.width = wh.height + 'px';
    }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="75%" align="center">
  <tr>
    <td><?php include("head.php");?></td>
  </tr>
</table><br />
<table width="75%" border="1" align="center">
<tr>
  <td align="center" colspan="3"><strong>产品介绍</strong></td></tr>
  <?php
include("conn.php");
if(isset($_GET['page'])){
$page=$_GET['page'];
}else{
$page=1;
}
?>
        <?php
if($page)
$page_size=4;
$query="select * from chanpin";
$yue=mysql_query($query);
$message_count=mysql_num_rows($yue);
$page_count=ceil($message_count/$page_size);
$offset=($page-1)*$page_size;
$query="select * from chanpin where id order by id desc limit $offset, $page_size";
$arr=mysql_query($query,$conn);?>
<?php
while($result=mysql_fetch_array($arr)){
?>
    <tr align="center">
  <td width="38%">名字：<?php echo $result['name'] ;?> | 大小:<?php echo $result['size']; ?> </td><td width="15%" align="right" valign="top">上传时间：</td><td width="47%" align="left"><?php echo $result['shij'];?></td></tr>
    <tr align="center">
    <td><img src="<?php echo $result['lujing']; ?>" /></td>
    <td align="right" valign="middle">产品说明：</td><td align="left" valign="top"><?php echo $result['chanpsm']; ?></td>

  </tr>
    <?php
}
?><tr><td>
<?php if($page!=1){
echo "<a href=chanpin1.php?page=1>首页</a>";
echo "<a href=chanpin1.php?page=".($page-1).">上一页</a>";
}
if($page<$page_count){
echo " <a href=chanpin1.php?page=".($page+1).">下一页</a>";
echo " <a href=chanpin1.php?page=$page_count;>尾页</a>";
}
?></td></tr>
</table>
</body></html>
4楼的兄弟谢谢你  这样做也不行呀，对我的那个图片没有影响反倒是对我的滚动图片有影响呀
我将我另外的一个js删了就可以了也就是
<table width="75%" align="center">
  <tr>
  <td><?php include("head.php");?></td>
  </tr>
</table>
这段删了就可以了有没有办法不删除这个呀
你把PHP生成的表格代码发上来啊。
你有 obj = document.getElementsByTagName('table')[0].getElementsByTagName('img');
而第一个表格是
<table width="75%" align="center">
  <tr>
  <td><?php include("head.php");?></td>
  </tr>
</table>
你的图片在第2个表格里

遇到麻烦 求高手

解决方案 »

遇到麻烦求高手