【html/CSS】画像サイズを自動調整で親の幅に合わせる方法

「画像を枠に合わせていちいち調節するのがメンドウ」

「ブラウザの幅を狭めたときに画像がはみでちゃう」

CSSにて比率を維持して画像サイズを自動調整で親の幅に合わせる方法を解説します。

【結論】max-width:100%とheight:auto

↓ブラウザの幅を変えて確認してみてください。比率を維持して画像サイズが自動で変わります。

<style>
.example img{
    max-width: 100%;
    height: auto;
}
</style>
<div class="example">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
</div>

max-widthは最大幅を指定するCSSです。これにより親の幅を超えなくり、はみでなくなります。

width:100%にしてしまうと小さな画像が幅いっぱいになってしまいます。そのためwidth:100%ではなくmax-width:100%を指定しましょう。

逆に小さい画像であっても親の幅に合わせたいのであればwidth:100%を指定しましょう。

height:autoを指定するとwidthに合わせて画像の元の比率を保ったままheightが変化します。

【注意】IEではtableとflexにてはみ出る

IEではtable内とdisplay:flex内のmax-widthは無視される仕様です。

IEではwidth:100%を指定しましょう。

【まとめ】画像サイズを自動調整する方法

imgにmax-width:100%とheight:autoを指定しましょう。

以上、CSSにて比率を維持して画像サイズを自動で調整する方法(レスポンシブ対応)でした。