display:table で横並びになった画像サイズを自動で揃える記述は可能？

Question

前提・実現したいこと

ブログを書いています。
その際、下記のような** 写真の段組み** をよく作ります。
従来は table 機能でやっていましたが、今後は CSS に記述した設定を呼び出すかたちで実現したいと考えています。

写真 A・B・C で段組みを構成します。
その際、画像にその場限りの width や padding の指定をしない ことが条件です。
画像に個別の条件付けをせずとも、自動的にこのレイアウトが成立する CSS を考えることが、この取り組みの重要な条件です。

この際私が難しさを感じている主因は、A・B・C の縦横比が異なる場合がしばしば起こる点にあります。
不揃いな画像でも自動的にこのレイアウトに収束する、CSS と HTML を書き出したい。

発生している問題・エラーメッセージ

実際にたどり着いた状況がこちらです。

該当のソースコード

<div class="cover">
  <div class="box">
    <div class="cell_A">

    <a href="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9c83f35b2adeab985d814364018b5242.png"><img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9c83f35b2adeab985d814364018b5242.png" alt="画像A">

    </div>
    <div class="cell_B">

    <a href="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/104e6657f44ad40831196f0c4eccda11.png"><img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/104e6657f44ad40831196f0c4eccda11.png" alt="画像B">

    </div>
  </div>
  <div class="box">
    <div class="cell_C">

    <a href="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7521431933a264b39afd5ad35199d1de.png"><img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7521431933a264b39afd5ad35199d1de.png" alt="画像C">

    </div>
  </div>
</div>

div.cover {
   width: 100%;
   margin-top: 5em;
}

div.cover div.box {
   display: table;
   max-width: 540px;
}

div.cover div.box div.cell_A {
   display: table-cell;
   padding-right: 10px;
   align: left;
}

div.cover div.box div.cell_B {
   display: table-cell;
   padding-left: 10px;
   align: right;
}

div.cover div.box div.cell_C {
   display: table-cell;
   max-width: 540px;
   padding-top: 20px;
}

試したこと

display:table の標準仕様では、隣り合う table-cell は等幅になるそうですね。
まずはこれが不等幅になる記述を調べました。
それについては単純な横幅の指定でひとまず回避できるようになりましたが、縦幅も同時に調整できる記述については、全く道筋を立てられずにいます。

挿入される画像それ自体には、width 指定をしていません。
2000px くらいある無垢の画像が 540px の段組みに収まっている体裁は、あくまで、画像を収める div.cell の大きさ（小ささ）によって押しつぶされるようにして成り立っている、と理解しています。

補足情報

「CSS の記述で画像の大きさをコントロールする」動機があります。
私がブログを書くようになって15年以上経つのですが、これまでは HTML 編集の table 機能で “写真の段組み” を作ってきました。
そのように個別の width や padding を設定して構わないなら、希望するレイアウト自体はすぐに完成します。

しかしながら、先述の通り長い期間にわたって文章を書き続けていると、周囲の環境の変化が必ず起こり、文章の体裁を見直さなければならない時がきっと訪れます。
例えば、スマートフォンでの視聴は過去には全く存在しない要請ですし、パソコンにせよ、モニターサイズは常に大型化してきました。
10年前であれば2カラムのブログ本文表示欄は 700px 程度が関の山でしたが、現在は 900px くらいが標準ではないでしょうか。

貼付した画像に対して個別に width や style を設定して済ませた場合、たくさん投稿するほど、その修正は不可能に近づきます。
これまで「table 機能で書けるから」と不勉強のまま過ごしてきましたが、元栓をひねるように全ての画像サイズが管理できる　･･･そういう記述方法を確立しておく必要性を感じ、CSS について調べ始めました。
もしかするとかなり難しいことを考えているのかもしれませんが、素人にはその判断すらつきません。
機能が実現できるなら、display:table にこだわる必要はありません。
ぜひとも知恵をお貸しください。

Comments

[Lhankor_Mhy]

HTMLは変更してよいのですか？

[Mimizk_50]

こんにちは。

全く新しい書き方で構いません。

display:table を使っているのも、数ある知識の中から最適と思われる方法を選んだ　･･･のではなく、今まで table タグを使って書いていたのに似ているから自然と手が伸びただけと言えます。書き方だってデタラメな部分があるはずです。

Answer 1

これは確かになかなかの難問ですね。。

ブログなどではなく一般的なWebサイトであれば画像のアスペクト比をルールで決めてしまうか、JavaScriptを用いた実装を検討する問題のように思えます。

回答にはなっていませんが、もしこのようなパーツが実現したとしても、2カラム部分に入れる画像それぞれの縦横比によっては要件は満たすもののかなり見づらい表示になってしまうような気もします。
（高さはそろっているが片方がものすごく大きく表示されてしまうなど）

Comments

[Mimizk_50]

こんにちは。

以前の回答者の方からも「難しい」という意見が聞かれ、だんだん無理筋な内容なのではないかと感じられてきたところです･･･。

なんとはなしに Facebook を眺めていた時、Facebook でさえ比率は整っていない・整っているように見えてその実すこしだけ画像どうしの間に隙間があるということに気づきました。
ド級に難しい内容なのかも･･･。

見にくくなってしまうかもしれないとのことですが、今までのところ、このようなことを手動で行ってきました。
ですので見た目に関しては、私の撮影した画像（主に2台のカメラとスマートフォン）を組み合わせている限りでは主観的に不満のないものと思えます。

Answer 2

こんにちは。

これは難しいですね。

サンプル

  <div class="cover">
    <div class="box1">
      <img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9c83f35b2adeab985d814364018b5242.png" alt="画像A">
      <img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/104e6657f44ad40831196f0c4eccda11.png" alt="画像B">
    </div>
    <div class="box2">
      <img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7521431933a264b39afd5ad35199d1de.png" alt="画像C">
    </div>
  </div>

    .cover{
      display: flex;
      flex-flow: column;
      width: min-content;
      margin: auto;
    }
    .box1{
      display:flex;
      width: max-content;
      height: 50vh;
    }
    .box1 img{
      height: 100%;
    }
    .box2 img{
      width: 100%;
    }

サンプルだとそれなりにできているように見えますが、スクリーンサイズによっては横スクロールが必要になります。
おそらく、aspect-ratio を使ったメディアクエリで対応させれば、それなりの感じになるんだろうとは思いますが……

参考：
aspect-ratio - CSS: カスケーディングスタイルシート | MDN

Comments

[Mimizk_50]

やはり難しい内容･･･なのですね･･･。ご苦労をおかけします。

ひとまず教えていただいた CSS と HTML を実行してみました。確かに、画像 A・B が、希望する縦横比で収まっています。すごい。

一方で、段組み 全体が過剰な大きさになりました。まずは PC ブラウザで見ていますが、ブログの本文欄・900px を軽々と超えています。そこで cover に max-width: 540px を与えてみたところ、A・B はそのままに、C だけが 540px に縮小されました。

画像 A・B を内包する box1 は、 cover の中にあるはずなのに、その最大幅を無視して表示されてしまうものなのですね･･･。

そこで box1 にも同様に max-width: 540px を与えてみましたが、見た目にはほとんど変わりませんでした。目視の限りですが、「A と B を合わせた幅が 540px になる」のではなく、「box 内どちらかの最大幅が 540px 以下になり（この場合 B ）、もう一方はその高さに合わせて伸縮している」ように見えました。

そしてこれは不具合とはほとんど関係のない部分なのですが、回答していただいた CSS には、.box2 img というのがありながら box2 そのものは記述されていません。引き続き改善したいのは box1 に含まれる画像ですから、box2 は現状うまくいっているのですが、box2 の記述がないは特に記述する必要がない領域ということなのでしょうか？

[Lhankor_Mhy]

段組み全体のサイズは、
height: 50vh;
だけで決められています。

これは、box1の画像の高さを50vhにそろえる、というものです。
ですので、その部分の高さは指定できるのですが、「この横幅にしたい」という指定はできません。
CSSでは難しいのではないかと思いますが、他の方が良いアイデアをお持ちかもしれません。

---

蛇足ですが、最近は、object-fit:cover を使って画像の上下左右溢れる部分を切り落としてしまう、というデザインがよく使われていると思います。
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

---

>box2 の記述がないは特に記述する必要がない領域ということなのでしょうか？

はい、そうですね。初期値のままで問題ないということです。