【CSS/html】画像サイズを親要素に合わせる方法

「画像のサイズを親要素に合わせて縮小するようにしたい！」

画像サイズを親要素に合わせる方法を解説します。

imgの場合

親要素に高さを指定していないとき

<style>
.example{
    border: 2px solid #000;
    width: 200px;
}
.example img{
    /*コレ*/max-width: 100%;
    /*コレ*/height: auto;
    display: block;
}
</style>
<div class="example">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

imgに「width:100%」を指定するとimgの幅が親の幅になります。

ただし親の幅が大きいとき、imgが小さいとき、想定外の大きさになってしまいます。

そこで「max-width:100%」です。これを指定するとimgが親要素より小さいときはそのサイズのままで、親要素をはみ出るようなサイズになったときだけ親要素と同じ幅になり、はみでなくなります。

「height:auto」を指定すると横幅に合わせて縦横比を保って高さが自動で決まります。

下記CSSは標準CSSとして指定しておくと便利です。

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

「display:block」はimgの下にできる空白を消すために指定しています。空白が気にならないときは指定不要です。

親要素に幅も高さも指定しているとき

<style>
.example2{
    border: 2px solid #000;
    width: 200px;
    height: 200px;
}
.example2 img{
    /*コレ*/object-fit: cover;
    width: 100%;
    height: 100%;
}
</style>
<div class="example2">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

親要素に幅も高さも指定しており、これに合わせる場合、imgに「width:100%」と「height:100%」を指定します。

これだけだと画像の比率を無視して縦か横に伸びた画像になってしまいます。

そこで「object-fit:cover」を指定し、画像の比率を維持しつつ、はみ出る部分をカットします。

backgroundの場合

<style>
.example3{
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    /*コレ*/background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
}
</style>
<div class="example3"></div>

backgroundを要素の幅と高さに合わせるには「background-size:cover」を指定します。

一行で指定するときは「background-position」の値に「/」をつけて一緒に指定しましょう。

background-sizeは背景画像のサイズを指定するCSSです。coverを指定すると画像を親要素の大きさに合わせます。はみ出た部分はカットされます。

background-sizeについて詳しくはこちら↓

【まとめ】画像サイズを親要素に合わせる方法

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

親要素に幅も高さも指定しているとき

img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

backgroundの場合

background:url(○○.jpg) no-repeat center center / cover;

以上、画像サイズを親要素に合わせる方法でした。