CSS/JSを使用して画像を中央揃えにする方法

Question

サイズの異なる画像をいくつか手に入れました。オーバーフローを使用すると、出力画像は元の画像の左上になりますが、画像の正確な中心になるようにしたいのですが、ピクセルにしたいと思っています。便利です...

Answer 1

imgを使用する代わりに、画像を背景としてdivを使用し、CSS background-positionプロパティを使用して中央に配置することができます。または、divの中にimgを使用してoverflow: hiddenを使用し、画像にマージンを使用して中央に配置することができます。

しかし、FYIでは、サムネイルはサーバー側で生成する必要があります。それ以外の場合は、イメージ全体を送信します。

Answer 2

あなたのサムネイルは画像全体のほんの一部ですか？なぜサーバー上の画像のサイズを変更せず、あらかじめ定義されたサイズの画像タグ内に表示するのですか？イメージがそれほど大きくない場合は、サーバー側のサイズ変更をスキップして、次のようにします。<img src="image.jpg" alt="Some image" height="42" width="42" />。画像サイズを好きなものに変更してください。