新着記事やランキングのサムネイルについて

アイキャッチ画像を囲む何かしらのタグを用意して、そのタグにサイズを決定後、元々imgで読み込んでいたものをそのタグのbackground-imageで読み込ませれば、いわゆるトリミングみたいなことはできます。

narrow.css のアレンジの可否について

ここで僕が答えた感じの方法でアスペクト比を保って表示することができるんですが、その際、background-imageの位置をcenter,center、つまりは縦横中央にしてるので、仮に元画像が異なるアスペクト比の場合でも上下などを非表示にしてそのアスペクト比で表示させることが可能というわけです。

理屈としては、元々の画像サイズが672 : 372 なので、新着記事やランキングのサムネイルを囲むタグの横幅が仮に150pxだったとしたら、672 : 372 = 150 : ?と言うことになり、縦は約83pxで表示すれば良いということになります。
つまり、横に対する縦の比率は、約55.3%であれば良いという感じになります。
なので、目的のサムネイルを150pxで表示しようが、200pxで表示しようが、その高さを55.3%で求めれば確実に元のアスペクト比で出力できるわけです。

imgタグの場合はトリミングが大変なので、別途何かしらのブロックをそのimgを囲むようにして用意し、cssでパディングのボトムを55.3%で求め、その囲んだタグに横幅を持たせて画像自体はbackground-imageで表示ってのが良いのではなかろうかと。
これの利点は、横幅に対してpaddingのボトムが自動で計算されるため、アスペクト比が保たれるというのと、仮にPC表示の際は横幅150pxだとして、スマホに切り換わった時、その横幅をpxで絶対指定するのって難しいですよね。端末によって横幅が違うわけですから。
なので、スマホの場合は仮にですけど横100%に設定しておけば、縦サイズはその横幅に合わせて自動計算してくれるって寸法です。横幅いっぱいのサムネイルはまぁないでしょうから、30%とか、50%とかでもアスペクト比はそれに合わせて保ちます。

宣伝と参考のために: jQuery: Youtubeの動画アドレスを書くだけでPlayerを埋め込んでみる ←うちのサイトですが、ここのyoutube playerでも同様の処理をしています。記事内にcodepenへのリンクがあるので、本体にアクセスしてもらって、レスポンシブでアスペクト比が保たれているのを確認頂けます。

ありがとうございます！！助かりました^^
解決しました！