0

ファイルシステムに保存したさまざまなデータと画像に基づいて、多数のhtmlページを生成するC＃プログラムがあります。HTML 自体は問題なく動作しますが、画像のサイズは大きく異なる場合があります。特定の画像がページ上で特定のサイズを超えないようにする方法が必要です。

これを達成する最も簡単な方法は、html自体を使用することです...htmlで設定できる何らかの「maxwidth」または「maxheight」プロパティがある場合、または画像をテーブルセル内に強制的に収める方法がある場合（このようなものを使用した場合、問題のないディメンションが縮小されているディメンションに合わせて自動的にスケーリングされることを確認する必要があります）。問題は、HTML のこのような「微調整」のようなものについてあまり知らないことです。Google にとっては難しいことのようです (ほとんどのソリューションには、ある種の HTML の専門化が含まれます。私はただプレーンな html を使用します)。

または、C# で画像を調べ、画像のサイズが特定の値を超えている場合は、html で幅/高さの値を設定することで、実行時に各画像の幅と高さを決定することもできます。ここでの問題は、サイズを取得するためだけに、イメージ全体をメモリにロードするのは非常に効率が悪いように思われることです。画像を「のぞいて」そのサイズを取得する方法が必要です (bmp、jpg、gif、または png の可能性があります)。

いずれかのアプローチに関する推奨事項は大歓迎です。

4

6 に答える 6

1

画像サイズの再計算を処理するプログラムが心配な場合は、負担をブラウザに押し下げるオプションがあります。JavaScript を使用できます。このスクリプトは、クライアント側で最大高さ/幅 200 ピクセルまで画像を「サイズ変更」します。

<script type="text/javascript" language="javascript">
    function img_resizer(img) {
        width = 0;
        height = 0;
        if (img.offsetWidth) {
            resizeImage(img.offsetWidth, img.offsetHeight)            
        }
        else {
            resizeImage(img.style.pixedWidth, img.style.pixelHeight);
        }
    }

    function resizeImage(width, height) {
        if (width > 200 || height > 200) {
            if (width > height) {
                height = (height / width) * 200;
                width = 200;
            }
            else {
                width = (width / height) * 200;
                height = 200;
            }

            img.style.width = width + 'px';
            img.style.height = height + 'px';
        }
    }
</script>

<img src="screen.jpg" onload="img_resizer(this)" />

IE と Firefox で動作することはわかっていますが、Safari、Opera、Chrome などのブラウザーでテストを行う必要があるかもしれません。しかし、私にはわかりません。弾丸を噛んでプログラムに任せたいだけかもしれません。

于 2010-04-02T01:04:11.127 に答える
0

プロパティの 1 つだけを設定した場合:要素のwidthOR height(両方または機能しない) の<img>場合、画像は縦横比を維持し、設定しなかった他の値は自動調整されます。

于 2012-04-17T13:27:38.703 に答える
0

タグには幅と高さのプロパティがあります。<img>1 つだけを指定すると、ブラウザーはそのサイズでサイズ変更され、縦横比が維持されます。

于 2010-04-01T22:05:20.600 に答える
0

CSS にはmax-widthとmax-heightプロパティがあります。これらは、すべての一般的なブラウザーの最新バージョンでサポートされています。

于 2010-04-01T22:06:15.357 に答える
0

あなたが言っていることに基づいて（および単一の画像を複数回操作するなどのいくつかの仮定）、画像のサイズをメモリにキャッシュすることは、ここで効率を上げるために行うべきことのようです。このようにすると、HTML または CSS で寸法をインテリジェントに設定できます。

解像度を取得する方法については、この質問を参照してください（これをまだ知らない場合は、残念ながら、画像全体をロードせずにこれを行う方法がわかりません）。その画像変数を非常に狭い範囲に保管し、できるだけ早く処分することをお勧めします。

アスペクト比が失われるため、無知に CSSmax-widthとプロパティを使用しないようにしてください。max-height

于 2010-04-01T22:12:00.167 に答える
0

そこにあるコピーと貼り付けの量は考慮されていません。私もこれを知りたかったのですが、私が見たのは、幅または高さのスケーリングの無限の例でした..他のオーバーフローを誰が望むでしょうか?!

  • ループを必要とせずに幅と高さのサイズを変更する
  • 画像の元の寸法を超えない
  • 適切に機能する数学を使用します。つまり、高さには幅/アスペクト、幅には高さ * アスペクトなので、画像は実際に適切に拡大縮小されます:/

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight)
{
    double srcWidth = img.Source.Width;
    double srcHeight = img.Source.Height;

    double resizeWidth = srcWidth;
    double resizeHeight = srcHeight;

    double aspect = resizeWidth / resizeHeight;

    if (resizeWidth > maxWidth)
    {
        resizeWidth = maxWidth;
        resizeHeight = resizeWidth / aspect;
    }
    if (resizeHeight > maxHeight)
    {
        aspect = resizeWidth / resizeHeight;
        resizeHeight = maxHeight;
        resizeWidth = resizeHeight * aspect;
    }

    img.Width = resizeWidth;
    img.Height = resizeHeight;
}
于 2011-04-13T20:08:08.233 に答える