Question

您好，有人可以帮助我，我们有一个网站，我们加载全尺寸图像，并动态调整为150x200px或200x150px，具体取决于横向或纵向。我们使用调整大小的图像作为索引页面，它在表格中显示，后面的全尺寸图像在站点中。我的问题是，当我们调用图像在索引中使用时，我们有一个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

Answer 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。但是，你的ACTUAL html可能就是那个td元素：

<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>

Answer 2

您可以使用max-width和max-height

的ccs样式

<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\"
    >";
?>

长宽比的图像再现

2 个答案: