img画像の横幅について

imgの横幅についてお聞きしたいです。
imgタグを一枚だけ設定すると、slider__container__slidersに合わせて、width1000px、height500pxになります。
これは理解できるのですが、imgタグを二枚設定すると、画像一枚ごとのサイズがwidth640、height500pxになります。
なぜ、widthの値が640pxという中途半端な値が出てくるのでしょうか。

また、複数枚設定したときにどのようにしたら、子要素のimgが親要素に合わした値になるのでしょうか。
どなたかにご教授頂けたら幸いです。よろしくお願いいたします。

html
1  <div class="slider__container">
2    <div class="slider__container__sliders">
3      <img src="images/cat_1.jpg" alt="">
4      <img src="images/cat_2.jpg" alt="">
5    </div>
6  </div>

css
1*{
2    box-sizing: border-box;
3}
4img {
5    width: 100%;
6    height: auto;
7}
8  .slider__container {
9    max-width: 1000px;
10    width: 60%;
11    margin: auto;
12    overflow-x: hidden;
13  }
14  .slider__container__sliders {
15    background: pink;
16    display: flex;
17    width: 100%;
18    height: 500px;
19  }
20

kei344

2020/06/21 01:30

画像の縦横ピクセルも提示してください。

Lhankor_Mhy

2020/06/22 01:44

こんにちは。 >imgタグを一枚だけ設定すると、slidercontainerslidersに合わせて、width1000px、height500pxになります。 >これは理解できるですが、とのことですが、当方で、ご提示のコードのimgを一つにして試してみましたが、1000pxになりませんでした。 https://jsfiddle.net/Lhankor_Mhy/3ayct8kn/ おそらく、ご提示いただいていない部分のコードの影響だと思いますので、問題が再現するコードをご提示ください。

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

回答1件

以下の前提で回答します。

css
1  .slider__container {
2    max-width: 1000px;
3    width: 100%; /* 60% は間違い */
4    margin: auto;
5    overflow-x: hidden;
6  }

まず、初期値として以下のCSSが効いています。

css
1img {
2  flex: 0 1 auto;
3}
4
5.slider__container__sliders {
6  align-items: stretch;
7}

さて、imgのサイズについて、

widthについて、ベースサイズは100%つまり1000pxですが、flex: 0 1 autoなので、最小コンテンツ幅まで縮小をするため、確定しません。
heightは、autoなので拘束がなく、align-items: stretchが効いているので、フレックスコンテナの高さいっぱいに広がります。つまり、500pxです。
高さが定まり、幅が不定のままなので、内在アスペクト比に従って最小コンテンツ幅が決まります。以下のような計算によります。

たとえば、画像のサイズが1280*1000だとすると、内在アスペクト比は 1280 : 1000。これに従うので、imgの幅をwとすると、1280 : 1000 = w : 500 です。これを解くと640です。