関連記事に表示される画像の縦横比の変更

例えば、関連記事のサムネイルは全て16:9にしたいとか、あるいはそれぞれ個別のアスペクト比を保ちたいとかありますか？

16:9などの決まったアスペクト比で固定なら、以前僕がいくつか答えてますしサンプルもあります。
画像自体がそれぞれアスペクト比が異なりそれに合わせて単純に指定サイズに縮小したいという場合はまた別の方法を考えなければなりません。

その際、見栄えとしてタイトルの位置は揃える(それぞれにタイトルの開始位置、つまりは左から任意の位置)として、16:9であれば、要素(画像・タイトル等)を囲む左端からタイトルまでの位置までのサイズが画像の横幅になるかと思うので、タイトルの長さによっては高さが足りなくなる場合があります。
例えばタイトルが1行で収まる時、3行等に渡る場合などです。

>縦横比をオリジナルのまま保てれば、
>画像の高さに差異がでても問題はありません。

と言うことですが、サムネイルの上下位置は上に寄ったままで良いのか、はたまたタイトルの中央にした方が良いのか等の仕様等を説明して下さい。

更に画像の比率と、タイトルの位置によってはかなり小さな画像になることがあります。ここらはどう考えておられますか？
タイトルとディスクリプション、記事を読むだけで一応、3行強の高さは既にあります。画像全体を表示したいとすると画像の最低横幅によっては縦幅が小さくなる場合がある可能性があるというような意味です。

元の画像が4:3に近いものであればそこまで小さくなることはないかと思うのですが、16:9以上の横長の画像の場合は上記理由で画像が小さくなり逆にどういう画像なのかがわかりにくくなる場合もあるということです。

更に厄介なのが縦長の画像です。他の画像と横幅を同じくしたら縦に長過ぎる可能性も出てきますし、高さを揃えた場合横幅があまりにもなさすぎるというような場合も考えられます。

これらは元の画像をどのように作られているか、あるいはどのように作っていくかだけの話なんですけれども、すでにたくさんの記事がある場合は画像を作りなおすのも面倒だったりするので、予めどのように表示するかは色々考えておかないといけません。

画像の横幅と縦幅自体は、特別難しいことをしなくても取得することは可能です。よってそれらを縮小すること自体は大変なことでも何でも無いのですが、縮小した時の画像の表示の仕方・位置、つまりはその仕様が欲しい感じです。

Hidekichi さん

今回もお助けいただきありがとうございます。また、レス頂いたにも関わらず遅れてしまい申しわけありません。

>例えば、関連記事のサムネイルは全て16:9にしたいとか、あるいはそれぞれ個別のアスペクト比を保ちたいとかありますか？
個別のアスペクト比を保ちたかったのですが、いただいたコメントを読みまして色々考えることが増えそうなのでやりたいことを改めました。

「画像が伸縮することでオリジナル画像とは雰囲気の違う画像になることを避けたい」というのが今回の目的ですので、「サムネイル画像の縦横分だけオリジナル画像から（切り取って？）表示」させるようにしたいです。

「サムネイル画像の縦横分だけオリジナル画像から（切り取って？）表示」させてもオリジナル画像とは雰囲気が変わりはしますが、その部分は個人的には許容範囲なので問題ありません。

右往左往したトピックになってしまいましたが、分かる方がいらっしゃいましたらお助け頂ければ幸いでございます。

こういうのはどうでしょうか？

サンプル: imgをbackground-imageで読み直す | jsFiddle

Hidekichi さん

ありがとうございます。まさにです。
早速適用してみます。
ありがとうございました;)