0

こんにちは、誰か助けてください。フルサイズの画像を読み込んで、その場で横向きまたは縦向きに応じて 150x200px または 200x150px にサイズ変更する Web サイトがあります。テーブルに表示されるインデックス ページにはサイズ変更された画像を使用し、サイトの後半ではフル サイズの画像を使用します。私の問題は、インデックスで使用するために画像を呼び出すと、100x100px の画像領域がありますが、これにより画像が 100x75px または 75x100px ではなく 100x100px に歪むことです。ここでは、使用するコードのセクションを示します。

 $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 です。

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

注意してください、PHP でエコーされていないかのように html を書き出しました。これは、可能な限り php で html をエコーすることは避けるべきであるというのが私の専門的な意見であるためです。ただし、実際の html は、その 1 つの 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-05T19:00:38.467 に答える
0

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\"
    >";
?>
于 2013-05-02T10:34:06.137 に答える