画像の縦横構図に関係なく、CSSだけで横幅を基準に表示する。

標題については、できないものとばかり思っておりました。そのため、 #CSS3 が普及しても機会もなく真面目に取り組むことはなかったのですが、つい最近、Webサイトの画像を運用する際の手間を少しでも減らせないかと思い挑戦しました。なんとか一定の解決を得ましたので、ここに備忘録がてら投稿する次第です。すべての環境で検証してもないので、どなたかの参考にでもなれば幸いです。

サクッと方法だけを、 #HTML5 とCSS3にて記述を紹介いたします。

本サイトの #Wordpress の投稿管理画面で画像を挿入すると次のようなHTMLで記述されます。画像サイズは「フルサイズ」に指定、左右中央への配置設定をすると余計な #ディビジョンでラップするのでシンプルなまま、HTML5の基本的なソースにします。なお、画像の確認のため「 #fancybox 」を仕込んであります。
赤字のクラス名「hustleInsertImage」はHTML編集画面で追記したしものです。実際にパブリッシュされるとimgタグの中が複雑になりますが、Wordpressのシステムにおまかせで大丈夫です。

<figure class="wp-block-image size-full hustleInsertImage">
<a href="https://hustlemouse.com/wp131228/wp-content/uploads/2021/08/imgYoko210228.jpg" rel="fancybox image">
<img src="https://hustlemouse.com/wp131228/wp-content/uploads/2021/08/imgYoko210228.jpg" alt="" class="wp-image-4788"/>
</a>
<figcaption>日光白根山（1200×900px）</figcaption>
</figure>

以下、CSSで処方した挿入画像の3点です。
用意した画像は、「日光白根山（横1200px × 縦900px）」、「塔の岳山頂からの富士（横800px × 縦1200px）」、「塔の岳山頂からの光る相模湾（横1800px × 縦720px）」の、横構図、縦構図、すごく横長構図に3点になります。クリックすればfancyboxで画像全体が確認できます。
横幅に合わせの手法につき、すごく縦長はありません。Webでの表示なので十分であると判断いたします。

挿入画像のすぐ後（↑ここらへん）に記述したstyleタグは次です。

<style>
figure.hustleInsertImage {
	width:50%;
	margin-left:auto;
	margin-right:auto;
}
figure.hustleInsertImage a {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
	width:100%;
	min-height:180px;
	max-height:280px;
	background-color:silver;
	overflow:hidden;
}
figure.hustleInsertImage img {width:100%;}
figure.hustleInsertImage figcaption {
	margin-top:0;
	padding-top:0;
}
</style>

よくご存知であれば「ああそうね。」という程度です。
最初の「figure.hustleInsertImage」の指定は、figureの幅を親要素の半分にして中央に配置するものです。
重要なのは「figure.hustleInsertImage a」に施す「 #flex 」一連の指定です。
「#display 」の「flex」指定と「 #flex-direction 」の「 #row 」指定までは基本ですが、「 #justify-content 」と「 #align-items 」を「 #center 」指定でにすると画像の真ん中合わせて表示してくれます。
「 #flex-wrap 」の「 #nowrap 」指定は重要でしょう。まあ、「 #wrap 」に指定してみれば、中央が表示されないのですぐ判ります。
「width」は一杯にして、高さを指定します。基本は「 #max-height 」の指定だけあれば十分で、横長の画像でも合わせて上下を詰めてくれます。でも最小高さに制限が必要な場合もあるので例として「 #min-height 」を指定して背景をグレーにしておきました。三つ目の画像の上下にグレーの背景色がご覧になれると思います。
そのままにしておくと画像がはみ出てしまうので「 #overflow 」の「 #hidden 」指定で隠します。
最後はimgタグの幅を100%にして矩形に満たしてあげます。
ここまでが本題です。
「figure.hustleInsertImage figcaption」はおまけで、格好悪いので画像とキャプションの隙間を詰めただけです。

ここ数年はflexを利用する案件がなかったもので、調べてみるとCSS3の出始め頃に比べて様変わりしていたので少々めんくらいました。でも既に互換性も整った様子で、ちょうど良い頃合いだったのかもしれません。この手法に気がついた時は「これでいままで諦めていたコントロールに光明が見えた。」と、ても安堵したものです。そかさ。