html - $img の最大高さを設定するが、プロポーションを維持する方法

Question

最大の高さまたは幅を設定する方法:

$img_attributes= ' 高さ=100 幅=100 '. 'alt="'.$product['product_name'].'"';

Answer 1

ええと、CSSプロパティがありますねmax-height。max-widthこれらは、IE6とIE7を除くすべての主要なブラウザーで機能します。

Answer 2

一般的な情報については、この回答を確認する必要があります：プロポーショナル画像のサイズ変更。

サーバー側を使用せずに画像のサイズを変更したい場合は、Javascriptを使用することをお勧めします。これがチュートリアルです。

つまり、新しい幅と高さを返すJavaScript関数があります。

function scaleSize(maxW, maxH, currW, currH){
  var ratio = currH / currW;
  if(currW >= maxW){
        currW = maxW;
        currH = currW * ratio;
  } else >if(currH >= maxH){
        currH = maxH;
        currW = currH / ratio;
  }
  return [currW, currH];
}

この機能を使用すると、画像の幅と高さを設定できます。

img.width = newW;
img.height = newH;

ただし、最善の方法はサーバー側で行うことです。これにより、クライアント側に奇妙な影響を与えるのを防ぐことができます。

Answer 3

次のスタイルでは、「MaxSized」cssクラスを使用するすべての画像の最大高さが100ピクセル、最大幅が100ピクセルになります。画像が小さい場合、画像は引き伸ばされません。

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

Pekkaが述べたように、これを最新バージョンのIEで機能させるには、XHTML 1.0 Strict DTDが必要ですが、個人的にはこれが適切なアプローチであると信じています。