トップの一覧に、同じサイズでサムネイルを表示させようとする企み

このページのコンテンツ

記事一覧を美しくしたいのさ

記事一覧に画像を掲載したい時、自分でアップロードしたアイキャッチ画像なら、予めサムネイルサイズを設定してあるので、記事一覧でもサイズが統一されてとてもすっきりキレイに整って見えます。
しかし、記事の一番最初の画像をアイキャッチとして利用する場合、自サーバにアップロードした画像を使えば問題ないですが、画像の直リンクの様な方法だとサイズの統一感が失われます。統一して表示するにも何やらやらねばならないことがあるようです。
画像の直リンクは、多々問題が起こる場合がありますので、許可の無い画像の直リンクにはご注意ください。

楽してアイキャッチを表示させ、しかもきれいにサイズを揃えたい

私がやりたかったのは、
①記事の一番目の画像をアイキャッチとして一覧に表示する。
②アフィリエイト先が提供する商品画像リンクのソースを記事に取り入れた時に、①の機能でアイキャッチとして一覧に表示させる。
③その際、必ずしも画像サイズと縦横比率がが同じとは限らないため、自動的にトリミングして一覧表示させる。
ソース改変や難しいことなどせず、コピー・ペースト・投稿と普通にやればOKなやり方。

Photoshopなどを使って画像をリサイズして統一させれば簡単ですが、面倒です。
そんな時に、CSSで任意の比率とサイズにトリミングできると楽ですね。
とても難しい記述が必要そうで、プログラムに疎い私には到底無理と尻込みしてしまいそうです。

たった一行で済むですと！？

色々、調べて行くと②を実現するにはたった1行記述すればよいと言うことが分かりました。それが、「object-fit」というプロパティーです。画像の縦横比を保ちつつトリミングしてくれます。
例えば、下記の様に設定すると正方形ではない画像を無理矢理に指定のサイズに変形させます。結果的に歪んだ画像になります。
imgはご自分のテーマにより異なります。

img {
width: 250px;
height: 250px;
}

このCSSに、一行追加します。

img {
 width: 250px; 
height: 250px; 
object-fit: cover; /* この一行を追加 */ }

すると、画像の中心から指定のサイズにトリミングしてくれます。

img {
width: 200px;
height: 133px;
object-fit: cover; /* この一行を追加 */
}

他の、サイズに合わせることもできる。この例だと、大多数が200の133なのに時々200の145みたいなはみ出したサイズがある。って時に、指定のサイズでトリミングするわけです。ただし、coverは中心を基準にトリミングします。いろいろな方法があるようで、画像付きで解説したいところ、管理人は入院中に記事を書いている関係で、より詳しい情報を提供されている下記サイトをご参照ください。