2

アプリケーションに幅：530ピクセル、高さ：510ピクセルの画像領域があります。その領域に画像を配置したいのですが、画像のサイズが異なります。その領域を埋めるためにアスペクト比を失うことなく画像をトリミングまたは拡大縮小する方法。winjsで利用できるネイティブメソッドはありますか？

4

2 に答える 2

5

そのためのいくつかのオプションがあります。

1つは、WinJSが提供するViewBoxコントロールを使用することです。ViewBoxは単一の子のみを持つことができ（したがって、タグを唯一の子として、またはimgを含むdivとして持つことになります）、その子を（CSS変換を使用して）そのコンテナに収まるようにスケールアップします（アスペクトを変更せずに）比率）。かなり滑らかです。

もう1つのオプションは、画像をコンテナ（divなど）のCSS background-imageプロパティとして設定し、background-sizeプロパティをに設定することcontainです。これにより、画像がコンテナのサイズまで引き伸ばされます。

あなたのケースが少し特別である場合に頼らなければならない最後のオプションは、結局のところそれほど悪いオプションではありません。ページのupdateLayoutメソッドでは、要素を参照し、そのCSSプロパティを明示的に設定して適合させることができます。その時点で、レイアウトについてすべて理解し、簡単に計算を行って画像のサイズを判断できます。これは、私がこれを行う私のプロジェクトの1つからのコードです。画面と画像のアスペクト比を比較して、サイズを幅と高さのどちらにするかを決定していることに注意してください。あなたの状況（私が推測している）とは異なり、私のコードは画像が画面全体に表示され、余分な部分がクリップされていることを確認します。imgを含めたいと思います。

function setImagePosition() {
    var img = q(".viewCamera #viewport img");
    if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
        img.style.width = format("{0}px", outerWidth);
        img.style.height = "";
        img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
        img.style.left = "0px";
    } else {
        img.style.width = "";
        img.style.height = format("{0}px", outerHeight);
        img.style.top = "0px";
        img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
    }
}

お役に立てば幸いです。

于 2012-12-11T15:36:35.760 に答える
0

HTML画像のスケーリングについて言及していますか？その場合は、幅または高さのいずれかを設定できます。どちらを設定しても、もう一方は画像のアスペクト比を拡大縮小して維持します。

于 2012-12-11T04:36:40.887 に答える