0

嗨，有人可以帮助我，我们有一个网站，我们可以加载全尺寸图像并根据横向或纵向动态调整大小为 150x200 像素或 200x150 像素。我们将调整大小的图像用于显示在表格中的索引页面，然后在站点中使用完整大小的图像。我的问题是，当我们在索引中调用图像时，我们有一个 100x100px 的图像区域，但这会将图像扭曲为 100x100px 而不是 100x75px 或 75x100px 这是我们使用的一段代码

 $dynamicList .= '<table width="100%" border="0" cellspacing="0" cellpadding="6">
        <tr>
          <td width="20%" valign="top"><a href="product.php?id=' . $id . '"><img style="border:#666 1px solid;" src="inventory_images/resized_' . $id . '.jpg"  width="100" height="100" alt="' . $product_name . '" border="1" /></a></td>
          <td width="80%" valign="top">' . $product_name . '<br />
            £' . $price . '<br />
           <a href="product.php?id=' . $id . '">View Product Details</a></td>
        </tr>
      </table>';
    }
} else {
    $dynamicList = "We have no products listed in our store yet";

我尝试删除高度 100x width100 但这会导致图像呈现为 200x150px

我的问题是，如何将 200x150px 的图像渲染到 100x100px 的空间并保持主页是 rushleighs.co.uk 的纵横比

4

2 回答 2

1

您只需删除属性和 css 中的高度声明。这将保持纵横比。但是，如果要将图像包含在 100 x 100 中，则需要为图像创建一个容器并将其溢出设置为隐藏：

<div class="image_small">
    <img src="inventory_images/resized_<?php echo $id; ?>.jpg">
</div>

和CSS：

.image_small{
    width:100px;
    height:100px;
    overflow:hidden;
}

.image_small img{
    width:100px;
    border:#666 1px solid;
}

请注意，我写出的 html 好像它没有在 PHP 中回显，因为我的专业意见是您应该尽可能避免在 php 中回显 html。但是，对于那个 td 元素，您的 ACTUAL html 可能是这样的：

<td width="20%" valign="top"><div class="image_small"><a href="product.php?id=' . $id . '"><img src="inventory_images/resized_' . $id . '.jpg" alt="' . $product_name . '" border="1" /></a></div></td>
于 2012-12-05T19:00:38.467 回答
0

您可以使用 ccs 样式的 max-width 和 max-height

<style>
    .img   {max-height:100px;max-width:100px;}
</style>

我在www.thomsonstravels.co.uk上的画廊中使用此功能

<?php
//I set the $_SESSION[wHeight] and $_SESSION[wWidth] when the site is first loaded
//and reset it when the browser is resized to the Screen Size and height.
function resize_values($image)
    {
        $maxWidth = $_SESSION[wWidth]; 
        $maxHeight = $_SESSION[wHeight];
        $img_size=getimagesize($image);
        $origWidth=$img_size[0];// Current image width
        $origHeight=$img_size[1];// Current image height

        // Check if the current width is larger than the maxWidth
        if($origWidth > $maxWidth)
            {
                $ratio = $maxWidth / $origWidth;   // get ratio for scaling
                $newWidth=$maxWidth; // Set new width
                $newHeight=round($origHeight * $ratio);  // Scale height by ratio
            }
        else 
            {
                //else set the new height and width to the original
                $newWidth=$origWidth;
                $newHeight=$origHeight; 
             }
        // Check if current height is larger than maxHeight
        if($newHeight > $maxHeight)
            {
                $ratio = $maxHeight / $newHeight; // get ratio for scaling
                $newHeight=$maxHeight;   // Set new height
                $newWidth=round($newWidth * $ratio);  // Scale width by ratio
            }
        $retval = "$newWidth|$newHeight";
        return $retval;
    }
//and to use this:
    $file="../images/my_image.jpg";
    $d=explode("|",resize_values($file)); //Call the function file name & path
    $resizeWidth = $d[0]; //retrieve width from the array
    $resizeHeight = $d[1];//retrieve the Height from the array
    echo"
    <img 
        src=\"$file\"
        style=\"
            width:$resizeWidth"."px;
            height:$resizeHeight"."px\"
    >";
?>
于 2013-05-02T10:34:06.137 回答