こんにちわー!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は縮小だけです。
いかがでしょうか。これで豚から和牛に戻って、うまいやきにくができます。それでは今度またよろしくお願いします。
謎の声”ふざけんな!”