css - ユーザーが画像をアップロードするときに、cssを使用してスキューを最小限に抑えるにはどうすればよいですか？

Question

ユーザーがプロフィール写真をプロフィールページにアップロードできるようにします。アバターのサイズは100pxx100pxです。ユーザーが完全に正方形ではない画像をアップロードしたときに画像の歪みが最小限に抑えられるように、cssでimgプロパティスタイルを編集するにはどうすればよいですか？

Answer 1

通常の寸法を変更する代わりに、トリミングします。リサンプリングしても、画像が歪んでしまいます。ユーザーにアップロードした画像を（canvas / javascriptを使用して）トリミングしてもらい、PHPスクリプトに、そこから取得した座標に従って画像をトリミングしてもらいます。

Answer 2

CSSで画像を切り抜くのは簡単です-それをDIVでラップし、オーバーフローを非表示にします：

div.imgwrapper {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

ただし、問題は、画像が非常に大きい場合（たとえば、600px x 400px）、全体の小さな隅が表示されるだけであるということです。また、画像が100px x 100pxより小さい場合、サイズは上に変更されません。

これを解決する唯一の（クライアント側の）方法は、JavaScriptを使用して画像のサイズを検出することですが、それでも注意が必要です（画像が読み込まれるまで画像のサイズを検出できませんが、画像を検出できないため）いくつかのさらなるトリックなしでキャッシュから画像をロードします）。JSソリューションを要求しなかったため、詳細については説明しませんが、SOでいくつかのソリューションを検索できます。

Answer 3

アップロード時に@Truthのように画像を切り抜くか、 TimThumbのようなスクリプトを使用して、元のサイズの画像を必要なサイズにその場で切り抜くことができます。

Answer 4

コードを使用して画像を切り抜く方法を使用せずに、100px / 100pxを使用しdiv、アップロードされた画像をこのdivの背景として設定し、水平/垂直位置を中央に設定します。

もちろん、アップロードされた画像のファイルサイズを確認する必要があります。そうしないと、1ページに20個の3Mbプロファイル画像が読み込まれる可能性があります。