YouTube みたいにサムネイルを横長に表示させたい

YouTube を見てみると、120×90px のサムネイル画像が 16:9 のハイビジョンと同じ比率で表示されています。

before:

120px * 90px

after:

128px * 72px (16:9)

今回は HTML と CSS で画像を横長に切り取って表示させる方法と、jQuery UI で角丸の枠を追加する方法について記述します。

• 画像だけを横長にする

以下のコードは、画像サイズを変更し、はみ出した部分をカットして表示させます（画像は上揃いで配置し、下部をカット）。

<!-- HTML -->
<div class="thin-thumbnail-frame">
  <img src="{uri}" alt="thumbnail" />
</div>

/* CSS */
.thin-thumbnail-frame {
  width: 128px;
  height: 72px;
  overflow: hidden;
}
.thin-thumbnail-frame img {
  width: 100%;
}

img 要素の親に div.thin-thumbnail-frame を置き、親要素で overflow: hidden とすることで画像のサイズ調整とはみ出した箇所の非表示を実現しています。

• 角丸の枠を jQuery UI で設置する

YouTube のサムネイルは薄い色の角丸枠でコーナーが覆われています。　jQuery UI の .ui-corner-all クラスを div.thumbnail-frame（div.thin-thumbnail の親）に追加することでこれを実現したいと思います。

<!-- HTML -->
<!-- Google CDN から jQuery と jQuery UI を取得する -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

<div class="thumbnail-frame ui-corner-all">
  <div class="thin-thumbnail-frame">
    <img src="{uri}" alt="thumbnail" />
  </div>
</div>

/* CSS */
.thin-thumbnail-frame {
    width: 128px;
    height: 72px;
    margin: 5px;
    overflow: hidden;
}
.thin-thumbnail-frame img {
    width: 100%;
}
.thumbnail-frame {
    width: 138px;
    height: 82px;
    border: 1px solid #bbbbbb;
}
/* jQuery UI の corner radius を 3px に上書き */
.thin-thumbnail-frame.ui-corner-all {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

　　
div.thin-thumbnail-frame は上下左右に 5px のマージンを設け、その親の div.thumbnail-frame は width, height を 10px 長く設定してあります。
また、.ui-corner-all クラスの radius を 3px にオーバーライドしました。

• 画像を中央に位置させる

ここでは 120×90px のサムネイルを扱っているため、img 要素の CSS で margin-top を以下のように追加します。

.thin-thumbnail-frame img {
    width: 100%;
    margin-top: -12px;
}

　　

外枠の大きさが安定しない時は、.thumbnail-frame クラスで padding: 0 としてみてください。