jQeuryUIでリサイズしつつ、画像を正方形に保ちたい

前提・実現したいこと

下図のように青いエリアを大きくしたときに赤い画像を正方形のまま小さくしたいです。
（逆に青いエリアを小さくしたときは画像を正方形のまま大きく（最大100px）したいです。）

発生している問題

画像が正方形でないときに実現できません。

該当のソースコード

理想形のデモとして下記コードをご用意しました。
これは画像が正方形なので上手くいっています。

しかし画像を
<img src="http://placehold.jp/24/FF0000/ffffff/150x150.png" alt="">
という正方形でなく
<img src="http://placehold.jp/24/FF0000/ffffff/150x200.png" alt="">
という長方形に差し替えますと、正方形のままでの調整が実現できなくなってしまうのです。

下記のデモ（https://jsfiddle.net/z6s9rLcw/）

html
1<div class="flex">
2  <div id="left" class="ui-widget-content">
3    <p>リサイズエリア</p>
4  </div>
5  <div class="right">
6    <div class="box">
7      <div class="upper">
8        <div class="thumb">
9          <img src="http://placehold.jp/24/FF0000/ffffff/150x150.png" alt="">
10        </div>				
11        <div class="titles">
12          <div class="title">
13            <p>5月19日</p>
14          </div>	
15          <div class="content">
16            <p>今日は良い天気だったので公園に行きました</p>
17          </div>	
18        </div>
19      </div>	
20    </div>
21  </div>
22</div>

CSS
1img {
2    max-width: 100%;
3    max-height: 100%;
4}
5p {
6    margin: 0;
7}
8.flex {
9    display: flex;
10    background: lightpink;
11    height: 100vh;
12}
13.upper {
14    display: flex;
15}
16.right {
17    padding: 20px;
18    width: 100%;
19}
20#left {
21    width: 200px;
22    text-align: center;
23    background: aquamarine;
24    display: flex;
25    flex: none;
26    align-items: center;
27    justify-content: center;
28}
29.title {
30    font-weight: bold;
31}
32.thumb {
33    flex: none;
34    float: left;
35    max-width: 100px;
36    max-height: 100px;
37    margin: 0 15px 0px 0;    
38    width: calc(20% - 15px); /* 画像を可変的にする */     
39}
40

js
1function my_resizable(){
2  $( "#left" ).resizable({
3    handles: "e",
4    minWidth: 200,
5    maxWidth  : $(window).width() - 200,
6  });
7}
8
9$(document).ready( function() {
10  my_resizable();
11});
12
13$(document).on('resize', function (e) {
14  my_resizable();
15});

試したこと

原因はもちろん.thumやimgのCSSにmax-widthやmax-heightしかないためで、ここにwidthとheightを追加すれば、発生している問題自体は解決できるのですが…

しかしこれでは/* 画像を可変的にする */を削除せざるを得なくなり、結局実現したいことが達成できません。

下記のデモ（https://jsfiddle.net/z6s9rLcw/1/）

html
1<!-- <img src="http://placehold.jp/24/FF0000/ffffff/150x150.png" alt=""> -->
2<!-- ↓ 長方形に変更 -->
3<img src="http://placehold.jp/24/FF0000/ffffff/150x200.png" alt="">

css
1img {
2    max-width: 100%;
3    max-height: 100%;
4}
5.thumb {
6    flex: none;
7    float: left;
8    max-width: 100px;
9    max-height: 100px;
10    margin: 0 15px 0px 0;    
11    width: calc(20% - 15px); /* 画像を可変的にする */
12}
13
14/* ↓ 以下のように変更 */
15
16img {
17    /* max-width: 100%; */
18    /* max-height: 100%; */
19    width: 100px; /* 追加 */
20    height: 100px; /* 追加 */
21}
22.thumb {
23    flex: none;
24    float: left;
25    max-width: 100px;
26    max-height: 100px;
27    margin: 0 15px 0px 0;  
28    /* width: calc(20% - 15px); */ /* 画像を可変的にする */  
29    width: 100px; /* 追加 */
30    height: 100px; /* 追加 */
31}
32

補足情報（FW/ツールのバージョン）

ここまでjQeuryは1.12.4を使っていますが、特にこだわりはございません。
どうぞ宜しくお願い致します。

yambejp

2020/05/29 07:58

長方形の画像を正方形に表示するのですか？

ThouShaltNot

2020/05/29 08:13

はい、赤い画像は常に正方形に表示したいと考えております。

Lhankor_Mhy

2020/05/29 08:21

>赤い画像は常に正方形アスペクト比を歪めるのですか？　それとも、クリップするのですか？

ThouShaltNot

2020/05/29 08:24

クリップできればベストです。不備が多く申し訳ございません。

行動規範の内容に同意します

回答2件

ベストアンサー

ご要望を呑み込めているかどうか不安ですが。
サンプル

css
1img {
2    width: 100%;
3    height: auto;
4    object-fit: cover;
5}
6.thumb {
7    flex: none;
8    float: left;
9    max-width: 100px;
10    max-height: 100px;
11    margin: 0 15px 0px 0;    
12    width: calc(20% - 15px); /* 画像を可変的にする */ 
13    display: flex;
14    height: min-content;
15}
16.thumb::before {
17    content: "";
18    display: block;
19    width: 0;
20    padding-top: 100%;
21}

投稿2020/05/29 09:09

Lhankor_Mhy

総合スコア36074

ThouShaltNot

2020/05/29 09:20

どうもありがとうございます！要望の通りで、修正も少なく驚きました。 min-contentがどのように効いているのか全く解読できず、驚くばかりです… お手数おかけして申し訳ございませんが、よろしければ簡単なご説明など加えては頂けませんでしょうか。なぜbeforeのpadding-top要素に対してmin-contentが関係できるのでしょうか？

Lhankor_Mhy

2020/05/29 09:36

おそらく、余分なルールもあるかと思いますが、ご容赦を。 1. padding-top の % は、親要素のwidthを参照するので、疑似要素に padding-top: 100% を当てて、親要素の幅と同じ高さにする。 2. height: min-content で高さを内在サイズ依存にする。内在サイズは疑似要素の高さを参照するので、幅と高さが同じ値になる。 3. .thumb をフレックスコンテナにして、デフォルトの align-items: stretch でフレックスアイテムの高さをコンテナ一杯に広げる。 4. object-fit: cover で画像をクリップする。という感じだと思います。かなり試行錯誤しましたので、自分でも理解があいまいです。

Lhankor_Mhy

2020/05/29 09:40

これは分かりにくい説明でしたね…… height: min-content で内在サイズを参照に行く　→　imgは align-items: stretch で高さがコンテナ依存のため不定　→　疑似要素は高さが決まっているのでこれを参照する　→　フレックスコンテナの高さが決まる　→　img がフレックスコンテナの高さを参照する ↑この方がわかりやすいかもです。

ThouShaltNot

2020/05/29 09:41

これは…かなりすごいですね。特に1と2は目からうろこのテクニックでした。

ThouShaltNot

2020/05/29 09:42

なるほど、わかりやすいご説明に重ねて感謝申し上げます。最後まで丁寧なご返信をどうもありがとうございました。

行動規範の内容に同意します