プログラミング記事:第九回
設定された横縦を越えず、
画像表示しましょう!!

こんにちわー!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は縮小だけです。

 

いかがでしょうか。これで豚から和牛に戻って、うまいやきにくができます。それでは今度またよろしくお願いします。

謎の声”ふざけんな!”