こんにちは、後藤です。

先日、画面いっぱいの横幅に10列ずつインスタグラムのサムネイルを並べて表示させ、そのインスタグラムの画像ページにリンクを飛ばすことがあったんですね。

要素の縦横比を維持する場合、横幅が固定だったら縦幅も固定で良いんですが、横幅が可変だと縦幅も可変するようにしなければいけません。

また、インスタグラムの画像はそれぞれ縦横比がまちまちな場合があるので、画像の縦横比を揃えるためにCSSでトリミングする必要があります。

今回は、縦横比を維持しながら可変し、画像をCSSでトリミングし、リンクを飛ばす方法を紹介します。

画像を横幅で合わせてトリミングする方法

まずは、横に４列並べ、縦横比は１：１で、画像は横幅いっぱいに合わせてトリミングする方法を紹介します。

ポイントは、「ul li a img」のwidthを100%にし、heightをautoにすることです。

画像が縦の方が大きい場合、縦の余ったところがトリミングされます。

画像が横の方が大きい場合は、縦の足りないところに余白が追加されます。

画像を縦幅で合わせてトリミングする方法

次は、横に４列並べ、縦横比は１：１で、画像は縦幅いっぱいに合わせてトリミングする方法を紹介します。

ポイントは、「ul li a img」のwidthをautoにし、heightを100%にすることです。

画像が横の方が大きい場合、横の余ったところがトリミングされます。

画像が縦の方が大きい場合は、横の足りないところに余白が追加されます。

画像を中央に合わせてトリミングする方法

次は、横に４列並べ、縦横比は１：１で、画像を中央に合わせてトリミングする方法を紹介します。

以下の場合、縦と横の大きさは最低100%で最大150%まで拡大します。

「ul li a img」のmax-heightとmax-widthのパーセンテージを調節することで、画像の表示のされ方を調節できます。

画像をトリミングせず縦横の大き方に合わせてリサイズする方法

最後に、横に４列並べ、縦横比は１：１で、画像をトリミングせず縦と横の大きい方に合わせてリサイズする方法を紹介します。

画像全体が表示されます。

ポイントは「ul li a img」のwidthとheightをautoにし、max-widthとmax-heightを100%にすることです。

まとめ

今回は、要素の縦横比を維持しながら可変し、画像をリサイズする方法をいくつか紹介しました。

画像のギャラリーなんかを作るときに参考にしてみてください。