【CSS】画像(img)が親要素から はみ出るときの対処方法

「親要素に合わせて画像を切り抜きたい！」

「レスポンシブ対応のため、親要素が縮んだらimgも縮んでほしい！」

「IEで確認したら画像がはみ出てる!?」

「角丸にしたいのに画像の四隅がはみ出る！」

画像(img)が親要素から はみ出るときの対処方法を紹介します。

はみ出るといってもさまざまなケースがあるため、ケース別に紹介します。

【トリミングしたい】object-fit:cover

下記のように画像が親要素からはみ出ているとします。（はみ出ているのがわかるように少し透明にしています。）

親要素に幅と高さを合わせて画像をトリミングしたい場合はimgにwidth:100%とheight:100%とobject-fit:coverを指定します。

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

imgにwidth:100%とheight:100%を指定すると親要素にぴったり合うサイズになります。

※親要素にauto以外のheightを指定していること

※imgにdisplay:blockで下の空白を削除していること

ただしぴったり合わせただけでは引き延ばされた画像になってしまいます。

imgに「object-fit:cover」を指定すると、元の縦横比を保ったまま縦か横のはみでた部分をトリミングできます。

なお、object-fit:coverはIEでは効きません。

IEでも効かせたい場合はbackgroundを使うことをオススメします。

【親要素に合わせて幅を縮めて縦横比を維持したい】max-width:100%

imgにmax-width:100%を指定すると親要素からはみ出ないようになります。

<style>
.example3{
    border: 2px solid #000;
    width: 200px;
}
.example3 img{
    /*コレ*/max-width: 100%;
    /*コレ*/height: auto;
    display: block;
}
</style>
<div class="example3">
    <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;
}

max-width:100%指定したのに はみ出る

max-widthを指定していてもimgが親要素からはみ出ることがあります。

【borderやpaddingを指定している】box-sizing:border-box

borderやpaddingはwidth(max-width)に含まれないため100％を超えてしまいます。

「box-sizing:border-box」を指定するとborderやpaddingをwidth(max-width)に含めることができます。

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

【画像にmarginを指定している】親要素にmarginを移す

画像の幅(width)は親と同じでもmargin-leftに値が指定されているとその分押し出され、親要素からはみ出してしまいます。

画像からmarginをなくして、その親要素に指定するなど工夫しましょう。

【IEにてtableやflexの中にある】width:100%

IEではtableのtd内のimgやflexの子要素内のimgにmax-width:100%を指定しても無視されはみ出ます。

対処するには「width:100%」を指定しましょう。

ただし、IEはもうほとんど使われていないため、IE対応を無視してしまうのも手です。

【角丸の親要素から角が はみ出る】親にoverflow:hidden

親要素をborder-radiusで角丸にしても、その子要素は角丸を無視して はみ出てしまいます。（はみ出ているのがわかるように少し透明にしています。）

親要素に「overflow:hidden」を指定すると角丸からはみでる部分を隠すことができます。

<style>
.example6{
    /*コレで角丸*/border-radius: 40px;
    /*コレで隠す*/overflow: hidden;
    border: 2px solid #000;
    width: 200px;
}
.example6 img{
    display: block;
}
</style>
<div class="example6">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

【まとめ】imgが親からはみ出るとき

• トリミングしたい
  →imgにobject-fit:coverとwidth:100%とheight:100%
• 親要素に合わせて幅を縮めて縦横比を維持したい
  →imgにmax-width:100%とheight:auto
  • max-width:100%指定したのに はみ出る
    • borderやpaddingを指定している
      →imgにbox-sizing:border-box
    • IEにてtableやflexの中にある
      →imgにwidth:100%
• 角丸の親要素から角が はみ出る
  →親にoverflow:hidden

以上、画像(img)が親要素から はみ出るときの対処方法でした。