サムネイル画像のセンタリングについての考察

最終更新日:2016-01-19

サムネイル画像のセンタリングについての考察です。

この記事は、私自身も決して詳しいわけではなく、かつ、説明が面倒なので手抜きである程度、CSS の知識があるという前提で端的にお話しします。

私自身は、例えば、こういう縦長のサムネイル画像があった場合、

2016-01-18 at 11.45.png

見栄え優先でセンタリングして枠でカットすると訳が分からなくなり、本来のアイキャッチとしての役割を果たさなくなるケースがあると思っているので、

2016-01-18 at 11.11.png

原則、こういうテクニックは使わないようにしているのですが、ネット上の情報を観察しているとそういう風にしたいというニーズもあるようなので、その方法論だけ簡単に覚え書きしたいと思います。 1

要素に定義している CSS をこんな感じにすると、

親要素 {
display: flex;
justify-content: center;
align-items: flex-start;
overflow: hidden;
}
子要素 (img) {
width: 100%;
height: auto;
}

例えば、サムネイル画像の表示がこんな風に変更されます。

2016-01-18 at 11.01.png

comemoarrow

2016-01-18 at 11.00.png

縦方向に拡大縮小されていたものを縦横比を保存した上で下方向 (場合によっては横方向も) をカットさせる、という変更をしています。 横方向の調整は「justify-content:」、縦方向の調整は「align-items」で行います。例えば、「align-items: center;」とすると、見かけ上、縦方向における中央部分を切り取ることになります。

flexbox の使い方の詳細については以下の記事等をご参照ください。


  1. わざと画像の一部分だけを表示させてチラリズム効果?を狙うこともできると思うので、別の目的での使い道はあるかもしれません。 

1件のコメント

  1. […] 縦方向に拡大縮小されていたものを縦横比を保存した上で下方向 (場合によっては横方向も) をカットさせる、という変更をしています。 横方向の調整は「justify-content:」、縦方向の調整は「align-items」で行います。 例えば、「align-items: center;」とすると、見かけ上、縦方向における中央部分を切り取ることになります。 [紹介元] サムネイル画像のセンタリングについての考察 | comemo […]

    いいね

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。