ユーザーは、写真のサイズを生成する必要があります比例してズームする必要があります。以下に示すように。
見てみると、テキストアライメント：センターを使用できます。比例して、プリセット<img />を使用する幅と高さの属性を解決できません。ユーザーの写真は非常に長いか、非常に広いかもしれないからです。私は彼らの関係についてオンラインで考え、これは次のとおりであると判断しました。
if（実際の幅>最大幅をプレビュー）{
スケーリング幅=プレビュー最大幅
}
if（実際の高さ>プレビュー最大高さ）{
スケーリングの高さ=プレビューの最大高さ
}
ただし、たとえば、幅と高さが比較的異なる場合、問題があります。比例したスケーリングを許可するには、さまざまな判断を下す必要があります。その後、それは私たちの自動化の希望の原則に違反します。もう一度考えてください、あなたは数学が好きではありませんが、数学はまだ非常に便利ですが、他の方法があるはずです。それは比例して拡大されているので、実際の画像の割合とプレビュー領域の幅を使用して関係を計算してみませんか？うーん...本当に大丈夫です。実際、幅または高さをズームインするだけです。割合は大小しかないからです。具体的には、それを実装する関数を書きます。
次のようにコードコードをコピーします。
/**
*画像は適応的な割合でズームされています
* @param img {element}ユーザーがアップロードした写真
* @param maxwidth {number}プレビュー領域の最大幅
* @param maxheight {number}プレビュー領域の最大高さ
*/
var resizeimg = function（img、maxwidth、maxheight）{
var w = img.width、
h = img.head;
//写真がプレビューエリアの時間よりも変更されない場合
if（w <maxwidth && h <maxheight）return;
//実際の画像比がプレビュー領域の幅と高さの割合よりも大きい場合
//画像幅をスケーリングし、それ以外の場合は画像幅をスケーリングします
w/h> maxwidth/maxheight？