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

サイズ変更による解像度の問題とかが無い場合は、どしどしやっちゃって良いのではないでしょうか？
うちのサイトはそもそもnarrow.cssを読み込んでません（笑）
つまりは、子テーマcssにそのほとんどが移されていまして、子テーマいじくるだけですべて変更されるようにしてあります。

例えば、子テーマよりもnarrow.cssの一部が優先されると困ることってありますよね？
たいていは!importantとかがついてるだけなんですけれども、できたら子テーマをいじくれば万事解決にしたいって事でうちではその9割強を子テーマcssのみで行っています。

先に書きました解像度の問題というのは、例えば元々100x100pxで読み込まれる画像を、300x300px等にした場合、画像を拡大することになる場合があるので、荒くなります。そうならないようにするためにはより高い解像度の画像を予め読み込んでおく必要があるわけですが、その必要がなく、単純にアスペクト比を変更するだけであればどんどんやっちゃって良いと思います。

サイズをpxで指定する方法もありますが、ちょっと面倒臭いながらこういう方法もあります。
子テーマstyle.cssに追記

.entry-thumb img {
  border: 0;
  /* width: 150px; */
  /* height: 150px; */
  /* margin-bottom: 40px; */
  display: block;
  position: relative;
  width: 100px;
  height: 0;
  padding: 0 0 75%;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

子テーマjavascript.jsに追記

(function($){
	$(function(){
		$(".entry-card .entry-thumb img").each(function(){
			var imgSrc = $(this).attr("src");
			$(this).css({
				"background-image": "url("+imgSrc+")"
			});
		});
	});
})(jQuery);

何をしているかと言いますと、それぞれのimgのアドレスをbackground-imageで読み込んで、それに対してスタイルをつけています。150x113pxはおおよそ75%なので、高さを0にして、paddingのボトムに75%確保することですべての画像の比率を合わせています。
75%を変更すれば16:9でも好きなアスペクト比にすることが可能です。元々の画像よりも小さくなるので画像が切れてしまいますが、backgroundの位置をcenter centerにすることで、画像の中心をセンターにすることができます。はみ出た部分はoverflowで消しています。

本来これは、iframeをレスポンシブにするためのテクニックですが、アスペクト比を保たせると言う点でとても便利な方法です。

仮に、.entry-thumbに何かしらの横幅を設定して、imgの方はwidth:100%にした場合、.entry-thumbの横幅に対する縦サイズは自動で75%になると言う考えです。

是非活用してください。

あ、ちなみに宣伝で

それらのテクニックを使ったのが jQuery: Youtubeの動画アドレスを書くだけでPlayerを埋め込んでみる こういうのです。

記事の本体 | codepen

ぜひ、レスポンシブでアスペクト比が保たれているのを見てください。

Hidekichi様
こんにちは。アドバイス有難うございます。

当方、ほとんどの元画像が4：3のアスペクト比でブログに貼り付けられていますので、この方法は応用も効きそうで重宝しそうです。

とても有意義なアドバイスをいただき助かります。
是非、活用させていただきます。

narrow.cssの件についてのご見解も参考になりました。有難うございます。

また何かありましたらよろしくお願いいたします。
それでは失礼いたします。