JS Webページの適応型スケーリングを実装する方法 画像_JavaScriptスキル

ユーザーが写真をアップロードすると、写真のサイズが不明になります。画像が大きすぎる場合は、プレビュー用にユーザーに提供された領域に従ってプレビュー画像を適用する必要があります。 、比例的に拡大縮小する必要があります。以下に示すように。

ざっと見てみると、text-align:center; を使用して中央揃えを実現できます。ただし、比例スケーリングは、デフォルトの の幅と高さの属性を使用して解決することはできません。ユーザーの画像が非常に長いか非常に広い場合があるためです。私はオンラインで彼らの関係を考え、以下の条件に基づいて判断しました:

if(実際の幅 > プレビューの最大幅) {
ズーム幅 = プレビューの最大幅
}

if(実際の高さ>プレビューの最大高さ) {
スケールされた高さ = プレビューの最大高さ
}
ただし、スケーリングが次の場合、幅と高さの両方がスケーリングされる場合などの問題が発生します。画像は比例的に拡大縮小されず、非常に醜くなります。比例的にスケールさせるためには、さまざまな判断を下す必要があります。そうなると、これは私たちが望むプログラムを自動化するという原則に反します。改めて考えてみると、私は数学が嫌いではありますが、それでも数学は役に立つし、他にも方法はあるはずです。また、比例的に拡大縮小されるので、実際の画像とプレビュー領域の幅の比率を使用してそれらの関係を計算してみてはいかがでしょうか。うーん…本当に大丈夫です。実際、幅または高さのどちらかを拡大縮小する必要があるだけです。なぜなら、その比率は大型種と小型種のみにあるからです。具体的には、それを実装する関数を作成します:

コードをコピーします コードは次のとおりです:

/**
* 画像適応スケーリング
* @param img {Element} ユーザーがアップロードした画像
* @param maxWidth {Number} プレビュー領域の最大幅
* @param maxHeight {Number} プレビューの最大高さ地域の
*/

var assignImg = function(img, maxWidth, maxHeight){
var w = img.width,
h = img.height;

// 画像がプレビュー領域以外に変更を加えない場合、
IF (w & lt; maxwidth && h & lt; maxheight)

// 実際の画像の比率がプレビュー領域の幅の比率より大きい場合、
// 画像の幅を拡大縮小します。それ以外の場合は、ズームの幅を変更します。
w/h & gt; maxwidth/maxheight? .width = maxwidth: img.height = maxHeight;