画像のサイズ指定について

Question

前提・実現したいこと

cssでブラウザのサイズに合わせて画像のサイズが縦横比率が変わらず変化するようにサイズの指定をしたいです。

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

画像が指定のサイズにならず、小さく表示されてしまいました。
実際にはwrapの中に6つ同じhtml構造で画像を配置しているため、横にスクロールできるようにしています。

該当のソースコード

<div class="wrap">
  <div class="slide">
    <a href="a#">
      <img src="image/~~~~~~~">
    </a>
    <p>~~~~~~~~</p>
  </div>
</div>

.wrap {
  display:flex;
  flex-direction:row;
  width:96%;
  height:auto;
  margin:0px 2%;
  overflow-y:hidden;
  overflow-x:scroll;
}
.slide {
  width:30%;
  height:auto;
  margin-right:3%;
  white-space:nowrap;
}
.slide a {
  display:inline-block;
  text-decoration:none;
  width:100%;
  height:auto;
}
.slide img {
  display:inline-block;
  width:100%;
  height:auto;
  border-radius:7px;
}
.slide p {
  width:100%;
  height:auto;
}

試したこと

調べたところ、画像を表示するimg要素のwidthは100%にすれば、親要素のサイズ(今回は.slide{width:30%;})に合わせて自動調整されるとあったのですが、親要素の大きさが指定の大きさになりませんでした。
slideクラスのwidthを変えても一定のサイズから大きくなりませんでした。
imgのwidthを変えた際も同様に小さくはなるけど、一定サイズより大きくなりません。
imgのwidthをautoにするとそれぞれの画像がバラバラの大きさになり、親要素の大きさよりも大きくなってしまいました。

プログラミング初心者で説明に至らない点もあると思いますがよろしくおねがいします。

Answer 1

slideクラスのwidthを変えても一定のサイズから大きくなりませんでした。

そうなのですね・・・。難しいですね。
ためしにコードをサーバに挙げてみたのですが、こういう感じでしょうか？
https://quintessential-lightning-fountain.glitch.me

Answer 2

親要素の大きさが指定の大きさになりませんでした。

この意味がちょっとわからないですね。たぶんどこかに誤解があるような気がします。

.wrapは、その親要素の96%の幅です。たとえば親要素がbodyで幅1000ピクセルだったとすると、.wrapの幅は960ピクセルです。
そして.slideは、それ（.wrap）の30%の幅ですので960×0.3=288ピクセルです。
aはそれ（.slide）の100%で288ピクセル。
imgはそれ（a）の100%で288ピクセル。
pは親要素.slideの100%で288ピクセル。

こういう計算になります。

Comments

[bluecat39]

ご回答ありがとうございます。
説明不足で申し訳ありません。親要素(.slide)がwidth:30%;にならないということです。ご回答いただいた通りbodyが1000ピクセルの時.slideは288ピクセルになるはずなのですが、100ピクセル程しかありません。
.slideにflex-shrink:0;を指定したところ288ピクセルに統一されたのですが、.wrapにdisplay:flex;を指定したため、子要素の.slideに初期値でflex-shrink:1;が効いていて、.slideが縮んでしまったという解釈で良いのでしょうか？その場合、今回のようにoverflowを指定していても縮んでしまうのでしょうか？