今日は、CSSで画像を枠の中に綺麗に収める方法を教えていただきました。
HTMLタグではimgタグを<div>で囲っておいて、
CSSで下記のようにコードを書く！
例：
【HTML】
<div><img src="〜”></div>
【CSS】
div{
border:solid 1px #000（枠の縁の指定。この部分は任意）
width:100%;
height:100px;
}
img{
object-fit:contain;
width:100%;
height:100%;
}
※青字の単位は親要素の有無などによって変える必要あり！
また、状況によってmarginなどは別途指定の必要ありです。
これで、画像を見切れることなく縦横比を保ったまま載せることが可能に
外側の枠のサイズを指定しておいて、
その枠に対して内側の画像のサイズの縦横どちらかが100％になるまで
画像が変形する仕組みです。
文字に起こすと簡単やん！って感じですが、
自分はお恥ずかしながらobject-fit:contain;の
値すら知らなかったので自分用のメモも兼ねて記載しておきます…！
昨日より今日の方がなんかコーディングと仲良くなれた気がする
けど、明日はまた多分ケンカするんだろう。。。笑
一歩ずつ、じゃあ