最終更新日:2018年4月6日 16時43分閲覧回数:487

Opera 12 で発生する img-fluid がレスポンシブにならない問題

問題

display:flex の中では max-width:100%; が適用されず、width:100%; ならレスポンシブになるが小さい画像まで拡大表示されるため根本解決ではない。
<div style="display:flex;">
    <div style="flex: 0 0 75%">
        <img src="header1.jpg" style="display:block;max-width:100%;height:auto">
    </div>
</div>

解決

親要素に min-width: 0; を追加する。
<div style="display:flex;">
    <div style="min-width: 0;flex: 0 0 75%">
        <img src="header1.jpg" style="display:block;max-width:100%;height:auto">
    </div>
</div>

参考リンクと参考画像

https://stackoverflow.com/questions/31967019/max-width-doesnt-work-in-flexbox

コメント

当フォームより収集される個人情報は、返信を要する際に使用されるものであり、法令に基づく行政機関等への提供を除き、ご本人の同意を得ずに第三者に提供することはありません。また、コメントが掲載される場合であってもメールアドレスが本サイト内に記載されることはありません。