こんにちわー！NISO desu!
今日のプログラミング記事は肉の話をします。和牛がある事故で豚（ブス）になってしまいました。そんなときはどうすれば、和牛に戻せますか？
”あっ やばい。。 私の和牛が。。 豚（ブス）になっちゃった。”
どうやら原因はこれです。特定なHEIGHTとWIDTHを指定したいので、こうなっちゃいました。。どうすれば、指定されたサイズを越えずに、画像を表示できますか。
”こんなときこそ” object-fitのご登場だ！！”
object-fitとは？
”CSS の
object-fitプロパティは、置換要素、例えば<img>や<video>などの中身を、コンテナーにどのようにはめ込むかを設定します。
contain置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
cover置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
fill置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
none置換コンテンツは、拡大縮小されません。
scale-downコンテンツは
noneまたはcontainを指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。” 出典：MDN developer
じゃ実際設定してみたら、どうなるか一緒に見ていこう！
contain
画像の比例を維持しつつ、縮小しましたね。
cover
枠が満たされていましたが、画像全体が見えなくなりますね。
fill
元々デフォルトの設定で、豚（ブス）になってしまいます。
none
拡大縮小しないため、元画像（めっちゃデカかった）の横縦に沿って、表示されます。ちなみにここにあるのはこまと脂肪と肉です。
scale-down
縮小された画像が使われます。ちなみにcontainは場合によって拡大もしますが、scale-downは縮小だけです。
いかがでしょうか。これで豚から和牛に戻って、うまいやきにくができます。それでは今度またよろしくお願いします。
謎の声”ふざけんな！”