shobonengine https://blog.hatena.ne.jp/shobonengine/ ShobonEngineの日記 https://shobonengine.hatenadiary.org/ YouTube jQuery YouTube を見てみると、120×90px のサムネイル画像が 16:9 のハイビジョンと同じ比率で表示されています。before: 120px * 90pxafter: 128px * 72px (16:9)今回は HTML と CSS で画像を横長に切り取って表示させる方法と、jQuery UI で角丸の枠を追加する方法について記述します。 画像だけを横長にする 以下のコードは、画像サイズを変更し、はみ出した部分をカットして表示させます（画像は上揃いで配置し、下部をカット）。 <!-- HTML --> <div class="thin-thumbnail-frame"> <img s… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fshobonengine.hatenadiary.org%2Fentry%2F20110217%2F1297871878" title=" YouTube みたいにサムネイルを横長に表示させたい - ShobonEngineの日記" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/shobonengine/20110216/20110216235938.jpg Hatena Blog https://hatena.blog 2011-02-17 00:57:58 rich https://shobonengine.hatenadiary.org/entry/20110217/1297871878 1.0 100%