FlexBoxを使用したとき画像が小さくなる

Question

Flexを使用すると、画像が実際のサイズより小さく表示される。
実際のサイズに画像を表示し、レスポンシブ対応させたいです。
※width="670"の画像ですが、表示ではwidth="515"ほどで表示されます。

<section class="topAbout inner">
  <div class="topAbout_flex">
    <figure><img src="xxx.jpg" width="670" height="440" alt=""></figure>
    <div class="topContent">
      <h2>Aタイトルが入ります</h2>
      <p>ここに文章が入ります。ここに文章が入ります。</p>
      <p class="btn"><a href="">View more</a></p>
    </div>
  </div><!-- topAbout_flex -->
</section><!-- /topAbout -->

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.inner {
	max-width: 1200px;
	margin: 0 auto;	
}

.topAbout_flex {
  display: flex;
}

figure {
  width: 100%;
  height: auto;
}

試したこと

figure {
  flex-shrink: 0;
}

flex-shrink: 0;を指定すると画像は実際のサイズになりますが、レスポンシブ対応にならない。

Comments

[zushi0905]

画像はちゃんとwidth:670pxで表示されてますね。
画面幅を1000pxより小さくしていくと画像が小さくなっていきますが、そこの事を言っているんでしょうか？

[arisaan]

ご返事ありがとうございます。
figure { width: 100% height: auto }を指定し、検証すると画像は515pxと表示され可変します(その時は1200px以下になると画像が小さくなっていきます)が、figure{ flex-shirink: 0 }を指定すると、画像は670pxと表示されますが、画像は可変しません。

[zushi0905]

状況が再現出来ていないのでなんとも言えない感じですね。
一応codepenに貼り付けたもの載せるので、自分の環境との違いを見つけて貰えば解決するかもしれません。
https://codepen.io/zushi0905/pen/BayZrKY?editors=1100

[arisaan]

ありがとうございます。解決できました。

Answer 1

画像の右のdiv要素(topContent)の内容が多いとそれによって画像が縮小されます。内容が少なければ670pxで表示されます。

ご希望のことが画面幅が1200px以上の場合は元サイズ（670px）、それ以下の場合は縮小してほしいということなら、メディアクエリで1200px以上は縮小しない設定にすることになると思います画像とコンテンツの幅を適切に設定すればいいですね。

flexコンテナの最大幅が1200pxで画像が670pxなので、670/1200=0.55833 から画像の幅を55.8%に設定すると
画面幅1200px以上だと 670px固定、それ以下だと画面幅に応じて縮小していきます。

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.inner {
  max-width: 1200px;
  margin: 0 auto;    
}

.topAbout_flex {
  display: flex;
}

figure {
/*  width: 100%; */
  width: 55.8%;
  height: auto;
}
.topContent {
  width: 44.2%;
}

動作確認用サンプル

Comments

[arisaan]

計算式までありがとうございます！とても分かりやすいです。ありがとうございました！！

Answer 2

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  
}
.inner {
    max-width: 1200px;
    margin: 0 auto;    
}
.topAbout_flex {
  display: flex;
}
figure {
    max-width: 55.833333%;
    flex: none;
}

これでどうでしょうか？
figureのCSSのみ変更してます。
こういうことじゃなかったらすみません orz

Comments

[arisaan]

ありがとうございます！解決できました。

Answer 3

flexは、子要素を伸縮させるレイアウトの場合に使うもので、指定しないと横並びになります。
横並びになった画像とコンテンツは、どちらも作用しあい、コンテンツの文字数の影響で画像が伸縮していると思われます。
figureタグにwidth:100%; が入っているのは、画像とコンテンツは縦並びで使いたいからですか？
その場合、折返しの指定と子要素の幅指定をしないといけないので以下のようになります。幅100%の子要素を横並びに設定したけど、幅100%だから折り返したって感じです。これとは別に最初から縦並びにレイアウトするものもあります。

.topAbout_flex {
  display: flex;
  flex-flow: row wrap;
}
figure {
  flex: 0 0 100%;
  height: auto;
}
.topContent {
  flex: 0 0 100%;
}

Comments

[arisaan]

そうなんですね！Flexboxのことがよくわかりました！ありがとうございました、解決できました！