CSSにdisplay:flex;を指定すると、子要素の画像が勝手に縮小される
色々良い感じにやってくれるflexだけど、画像を勝手に縮小してしまうことがある
<div class="flex_box"> <p><img src="./sample.jpg" alt="説明"></p> <div> 何か長い文章 </div> </div> <styles> .flex_box { display: flex; } </styles>
こんな感じにしていると、要素の横幅次第では画像が勝手に縮小されることがあります。
これが起こるのはテキストの部分が長文であるときです。
子要素に
.flex_box p { flex: none; }
こんな感じでflex:none;を指定すると想定通り通常サイズで画像が表示されます。