【HTML, CSS】簡単!複数の画像のサイズをそろえて表示する方法

スポンサーリンク
CSS
スポンサーリンク
スポンサーリンク

やりたいこと

今回は複数の画像サイズをそろえる方法について解説します。

画像に対して、widthとheightを設定することもできますが、縦横比が変わってしまい、うまくいかない場合が多いと思います。

ソースコード

結果的に下のコードで一番簡単に画像サイズをそろえることができたました。

See the Pen GRKMqJM by Tomomi Hirotane (@hirotane) on CodePen.

ポイント

HTMLでは画像の場所のみを確保しています。

CSSで画像を読み込みます。

CSSで指定した空間に、この画像を背景画像として貼り付けます。

background-positionを変更することで、画像の好きな部分を切り抜くことができます。

background-position – CSS: カスケーディングスタイルシート

注意点

ここで、この方法では指定したサイズで画像を切り取っているため、画像全体が表示されるわけではない点に注意してください。

この方法では、四角だけでなく好きな形で切り取ることができるので、ページのデザインに合わせて、いろいろ変えてみてください。

タイトルとURLをコピーしました