图像再现

嗨能有人帮我，我们有一个网站，我们加载全尺寸图像和调整就飞到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宽度100但这导致图像被渲染为200x150px

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

来源

2012-12-05 Barry Holding

你只是删除微博的高度声明th属性和CSS。这将保持宽高比。但是，如果你想保留载到100×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中回荡，因为它是我的专业意见，你应该避免呼应HTML在PHP中只要有可能。不过，实际的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>

来源

2012-12-05 19:00:38

非常感谢大家的赞赏 –

没问题。如果这是您正在寻找的答案，请不要忘记将其标记为已接受。 –

你可以使用最大宽度和最大高度的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\" 
    >"; 
?>

来源

2013-05-02 10:34:06 SimplySimon

回答

相关问题