KYO

高さの違う画像を揃えてレスポンシブに横並び表示する

2018年8月20日 CSS ,

今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。
さらにレスポンシブに表示させます。
高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。

イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。

レスポンシブ画像

レスポンシブ画像

こんな感じで、横並びでも高さを揃えた画像ギャラリーのようなものを作ります。

デモページ

今製作中のページの一部として取り込んでいますので、他にも要素がありますが、一番したのエリアが今回作ったレスポンシブ画像です。

高さを揃えるレスポンシブ画像

高さを揃えるレスポンシブ画像

今回作るものは画像の高さを揃えて横並びするのですが、例えばcss側で高さを指定してしまえば、こんなのは一発でクリアできます。
でも、それだとなんか気持ち悪いので、高さもレスポンシブに変化してくれる画像グリッドのようなものが作りたかったのです。

こんな風に書くとレスポンシブに高さを揃えて表示してくれます

ポイントとしては画像の入れ物に、gallery-itemという名前のクラスをつけています。この入れ物は、padding-top:19%という値を持っています。なので上部に19%の空白ができます。

そこを埋めるように画像を設置します。なので画像はposition: absolute;を設定します。そこで幅も高さも100%にしてしまえば、入れ物にスッポリと収まるという仕組みです。

そして、その入れ物を入れておく入れ物(gallery)はフレキシブルボックスを設定して横並びします。
justify-content: space-around;で感覚開けて配置させれば、それなりに見やすいレイアウトです。

flex-wrap: wrap;なのでgallery-itemの幅次第で、折り返し位置を設定できます。
例えばgallery-itemのwidth:を49%くらいにしとけば画面に二つ並んだデザインになります。

このようにすると画面幅を変えた時に高さがレスポンシブに変化してくれます。


関連記事

Bootstrapとフレックスボックスで記事一覧部分のデザインを作る

2018年7月28日

ワードプレスのテーマを自作している時に、トップページに新着記事一覧を表示することが多いのですが、その記事一覧部分のデザインは非常に重要ですね。どんな記事なのか知る前に、視覚的に見やすいか見やすくないかという情報が入ってきてしまうので考えて作るべきです。 記事一覧部分を作る まずはBootstrapを使って作るパターンと、Bootstrap...

cssだけでレスポンシブなナビゲーションメニューを作る

2018年6月27日

ソースコード   ヘッダーのメニューが横一列に並んでいて、画面幅が狭くなるとアイコンが出てきて、クリックするとメニューが表示されるという、スマホサイトではあるあるの仕組み。 だいたいが、jQueryのトグルクラスを使って実現しているのですが、今回はcssだけで作ってみました。 まだまだ改良の余地があるのですが、一応機能的には十分...

ERROR: Could not find a valid gem ‘sass’でsassがインストールできない

2018年8月2日

Mac環境で sudo gem install sass ERROR: Could not find a valid gem 'sass' (>= 0), here is why: みたいなエラー起きた とりあえずググる Error: SASS installation for windows 英語でよくわからんが gem sour...

cssデザインメモ。自分の勉強用

2018年8月27日

cssでちょっとしたデザインをメモしていきます。背景画像系はまだまだ面白く操作できそうだ。 ボックスの左上と右下にアイコン画像を設置して、引用文などに使えるデザイン .box{ padding:30px 60px; margin:100px 100px; color:#333; text-align: center; display: i...

パーツを組み合わせてレスポンシブなサイトを作った

2018年7月28日

過去の3つの記事で、記事一覧部分のデザイン、ヘッダーメニュー部分のデザイン、なんかスライダー部分のデザインを作りました。 これらの3つの記事の応用で一つのレスポンシブなサイトを作ってみました Bootstrapとフレックスボックスで記事一覧部分のデザインを作る 記事やコンテンツが流れていくスライダーのアレを作ってみた オーバーレイをかけた...