sk51.log

The Averageman's web log.

CSSだけでどんな画像でも4:3や16:9の比率を維持して配置する方法


2015年11月19日 Web制作

大小さまざまな画像をキレイに表示させたい場合、「サムネイル画像を画一に作成し、クリックしたらLightboxのようなプラグインで表示させる」といった方法が取られます。
例えば、インスタグラムを想像して頂ければわかると思いますが、インスタグラムはすべて正方形の画像でキレイにタイル狀に並べられています。
もともとインスタグラムが正方形の画像なので、このような表現が可能なのですが、画像のサイズがバラバラだとインスタグラムのようにサイズを合わせるのに苦労します。

そういうときに便利なのが、今回ご紹介する方法です。
このやり方は、iframeをレスポンシブに対応させたい時に使用するCSSハックで、これを画像に応用します。
もちろん、レスポンシブ対応なので、様々な場面で活躍できるCSSハックです。

1. 考え方

「比率を維持」して「レスポンシブ」となると、考えが複雑になりがちで、すぐにJavaScriptでの対応を考えてしまいます。
それを、CSSだけでやるにはどうすればいいかというと、CSSの特性(仕様)を利用します。
比率が決まっていれば、横幅さえ分かれば縦幅を算出することができます。
例えば、以下のように考えてみます。

4:3の場合

横幅を基準とすると、縦幅は横幅の75%(3/4=0.75)になります。
横幅が400pxであれば、縦幅は、400×0.75=300pxとなります。

16:9の場合

横幅を基準とすると、縦幅は横幅の56.25%(9/16=0.5625)になります。
横幅が160pxであれば、縦幅は、160×0.5625=90pxとなります。

2. HTML/CSSの実装

そこで、横幅を基準として縦幅を設定できるCSSのプロパティを探すと、paddingが当てはまります。
CSSの特性(仕様)によるもので、paddingに%を指定すると、横幅に対するパーセンテージになります。
たとえば、横幅が100pxのとき、padding-top:50%; は、50pxに相当します。
つまり、高さをheightで指定するのではなく、padding-topで指定すると、常に比率を維持するようになります。

<style>
.img__thumb
{
  padding-top: 56.25%;
  width: 100%;
}
</style>

<div class="img__thumb"></div>

これが、常に16:9を維持するボックスになります。

3. 画像の配置

次に実際に画像を配置します。
ここがポイントで、imgタグを使用してしまうと、画像のサイズによりで空白が出てしまう場合があります。
そこで、CSS3のbackground-size: cover;を使用します。

<style>
.img__thumb
{
  background-image: url();
  background-size: cover;
  padding-top: 56.25%;
  width: 100%;
}
</style>

<div class="img__thumb"></div>

coverは、比率はそのままで背景の表示領域を覆うように配置されます。
以下のように縦長の画像を横長の比率16:9にする場合、はみ出る上下の部分は見えなくなります。
trimming

background-size が contain か cover:
画像は固有比率を維持したまま内包ブロック内で最大のサイズで描画されるか、背景配置領域を覆うように描画されます。画像が固有比率を持たない場合背景配置領域のサイズで描画されます。

引用:Mozilla Developer Network より background-size – CSS | MDN

4. 実践

実際に入れてみましょう。
なお、実際に表示すると大きくなってしまうため、.img__thumbにBootstrapのグリッドを追加しています。
また、実際の画像のリンクも貼りましたので、ご参考ください。

<style>
.img__thumb
{
  background-size: cover;
  padding-top: 56.25%;
  width: 100%;
}

.img__thumb--sample01
{
  background-image: url(http://sk51.jp/wp-content/uploads/2015/11/01.jpg)
}
.img__thumb--sample02
{
  background-image: url(http://sk51.jp/wp-content/uploads/2015/11/02.jpg)
}
</style>

<div class="row">
  <div class="col-xs-6">
    <div class="img__thumb img__thumb--sample01"></div>
  </div>
  <div class="col-xs-6">
    <div class="img__thumb img__thumb--sample02"></div>
  </div>
</div>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

*

CAPTCHA