【CSS】imgタグを、親要素の幅に収めるには？

半日かけてネットや本で調べてもわからなかったので教えてください。

幅が500pxの画像2枚を、800pxの親要素の中で横並びにしたいです。
この場合、画像2枚を合わせると1000pxになるので、親要素より多い200pxがはみ出してしまいます。
そうではなくて、親要素の幅に応じて画像の大きさを変える(縦横比を保ったまま）には、どうしたらいいのでしょうか。
下記が私が考えたソースなのですが、何か足りないものなどご指摘をいただけないでしょうか。

【HTML】
ケーキとプリンの画像を横並びにするべく、「oyatsu」という親要素を作りました。
※画像＋名前にしたかったので、<ｐ＞タグを追加しています。

<div class="oyatsu">

<div class="foods">
<img src="cake.jpg" alt="ケーキ">
<p>ケーキ</p>
</div>

<div class="foods">
<img src="pudding.jpg" alt="プリン">
<p>プリン</p>
</div>
</div>

【CSS】
①親要素のoyatsuクラスにdisplay:flex;を指定し、横並びにしました。
　また、幅を800pxに指定しました。
.oyatsu{display:flex;
width: 800px;}

②ネットなどで調べて、いろんなセレクタを指定して試行錯誤しましたが、
　最終的にはこうなりました。
.foods img{max-width: 800px;
　　justify-content: space-between; ｝
　
③文字の位置を中央揃えにしました。
.foods p{text-align: center;}


画像の横並びには成功しました。しかし、とにかく何をしても、画像の大きさが変わりません。
imgタグは、たとえdivで親要素の中に含まれているものだとしても、従順にその中に納まることなく、
自由奔放に、画像本来のサイズとなってしまうのでしょうか。

私はてっきり、親要素の幅に合わせて、子要素である画像の方が大きくなったり小さくなったりするものだと思っていました。
試しに親要素（oyatsu）の幅を色々変えてみましたが、画像の大きさが変わることはありませんでした。
苦肉の策で、justify-contentを指定すれば、親要素の幅の中でやりくりしてくれるかと思いきや、変わりませんでした。

今日有給をとったのに、ほぼこの部分で時間を費やしてしまいました…
ご教示願います。

質問者からの補足コメント

• fujilinさん、今出先からやってみたところ、綺麗に収まりました。
  あれだけ苦労（泣）したのに。すごい！！
  ありがとうございました！！！

  No.1の回答に寄せられた補足コメントです。 補足日時：2021/01/14 11:19

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/01/13 22:00

こんばんは

flex指定はその子要素の大きさを調整しますが、孫要素以下には直接の影響は与えません。
また、img要素は、サイズの指定がなければ本来の大きさで表示されます。

以下の指定ではいかがでしょうか？

.oyatsu {
display: flex;
width: 800px;
}
.oyatsu img {
width: 100%;
}

この回答へのお礼

おはようございます。さっそくのご回答ありがとうございます！！
すぐに気がつけば良かったのですが、これから出かける直前でした(;'∀')
昼休みか、帰宅したらさっそく教えていただいたコードでやってみます。
思いのほかシンプルなコードで、それにも驚いています！ありがとうございます！

お礼日時：2021/01/14 08:50