以下に示すように。
ざっと見てみると、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 < maxWidth && h < maxHeight)
// 実際の画像の比率がより大きい場合プレビュー領域の幅と高さの比率
// 画像の幅を拡大縮小します
w/h > maxWidth / maxHeight ? img.width = maxWidth : img.height = maxHeight;
完全なテスト コード:
画像適応スケーリング
<スタイル>
元の画像を表示 ||
記事に戻る: 比率に応じた画像の適応スケーリングについて»
var img = document.getElementById('img'),
/**
* 画像適応スケーリング
* @param img {Element} ユーザーがアップロードした画像
* @param maxWidth {Number} プレビュー領域の最大幅
* @param maxHeight {Number} プレビューの最大高さ地域
*/
resizeImg = function(img, maxWidth, maxHeight ){
var w = img .width,
h = img.height;
// 画像がプレビュー領域より小さい場合は変更されません
if(w < maxWidth && h < maxHeight) return;
// 実際の画像の比率がプレビュー領域の幅と高さの比率より大きい場合
// 画像の幅を拡大縮小します。それ以外の場合は、画像の幅を
で拡大します。 h > maxWidth / maxHeight : img.height = maxHeight;
resizeImg(img, 500, 300); >
