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

1.はじめに
＜この記事の概要＞
画像が親要素からはみ出てしまう場合にどういった改善ができるのかをまとめてみます。

＜画像がはみ出す原因＞
画像が親要素からはみ出る原因は主に2つあります。
1－画像サイズが親要素サイズよりも大きい場合：画像のwidthやheightが親要素よりも大きい場合には、画像が親要素からはみ出ることがあります。

2－親要素に設定されたプロパティが画像の表示に影響を与える場合：例えば、親要素にwidthやheightの値が設定されている場合、画像が親要素からはみ出ることがあります。また、positionやoverflowなどのCSSプロパティが親要素に設定されている場合、画像が親要素からはみ出ることがあります。

2.主な対処法２つ
①→img{
max-width: 100%;
height: auto;
}
を標準CSSとして指定しておく。
imgに「width:100%」を指定するとimgの幅が親の幅になります。
この場合親の幅が大きく、imgが小さいとき、想定外の大きさになってしまいます。
そこで「max-width:100%」です。これを指定するとimgが親要素より小さいときはそのサイズのままで、親要素をはみ出るようなサイズになったときだけ親要素と同じ幅になり、はみでなくなります。さらに「height:auto」を指定すると横幅に合わせて縦横比を保って高さが自動で決まります。

②→ img{
object-fit: cover;
width: 100%;
height: 100%;
}
を対象の画像に指定する。
親要素に幅も高さも指定していて、それに合わせる場合、imgに「width:100%」と「height:100%」を指定します。
ただこれだけだと画像の比率を無視して縦か横に伸びた画像になってしまいます。
そこで「object-fit:cover」を指定し、画像の比率を維持しつつ、はみ出る部分をカットしすることが出来ます。