가로 세로 비율의 이미지 변환

Question

안녕하세요 누군가 나를 도와주세요. 가로 또는 세로에 따라 150x200px 또는 200x150px로 전체 크기 이미지를로드하고 크기를 조정할 수있는 웹 사이트가 있습니다. 크기 조정 된 이미지는 표에 표시되는 색인 페이지와 나중에 사이트의 전체 크기 이미지에 사용됩니다. 내 문제는 우리가 인덱스에 사용하기 위해 이미지를 호출 할 때 우리는 100x100 픽셀의 이미지 영역을 가지고 있지만 이것은 우리가

$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"; 

I를 사용하는 대신 100x75px 또는 75x100px 여기 코드의 섹션 100x100 픽셀 이미지를 왜곡입니다 '높이 100x width100을 제거하려고했는데 이미지가 200x150px로 렌더링 됨

제 질문은 200x150px의 이미지를 100x100px의 공간에 렌더링하고 가로 세로 비율을 유지하는 방법 홈 페이지는 rushleighs.co입니다. .uk

Answer 1

bo의 높이 선언을 제거하면됩니다. 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을 반향하지 않도록해야한다는 전문가의 견해입니다. 그러나 실제 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

당신은 최대 폭 및 최대 높이의 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\" 
    >"; 
?>