ホームへ

【html/CSS】画像サイズを自動調整する方法(比率維持かつレスポンシブ対応)

2021年07月23日

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

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

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%を指定しましょう。

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

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

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

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

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

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ