問題
33画像をトリミングしてみよう
この問題では、画像のトリミング方法を学習します。 Web制作では頻繁に画像を表示させることがあるかと思います。 画像サイズを統一させたり、画像が大きくても崩さずに表示する際に役立ちます。
HTML/CSSの問題に挑戦しよう！
問題
「画像をトリミングしてみよう」
CSSを使って画像をトリミングしてみましょう!
見本動画を参考にしてCSSに記述し実装してください。
※CSSを適用させた際の差分を表す動画となっております。
あらかじめエディタに書くコード
<div style="background-color:#000;display:inline-block;">
<img src="https://ninjacode.work/assets/img/kv.png">
</div>
¥HTML¥
期待する画面
解答と解説（画像をトリミングしてみよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
画像をトリミングしたい場合は、imgタグにトリミングした幅と高さを指定し
object-fit: cover;を指定する事で実装できます。
補足
object-fitプロパティについて詳しく解説します。
object-fitは画像をトリミングする際に使用するプロパティです。
object-fitには他にも以下のようなものが用意されています。
・fill:指定した高さと幅に合わせて画像が縦横方向に拡大・縮小されます。ただ縦横比が維持されないので、画像サイズによっては画像が伸びたり潰れてしまったりします。
・cover:縦横比を維持して、指定した高さと幅で埋まるようにリサイズされます。縦横のうち小さいほうを基準にしてリサイズされるので、はみ出た部分はトリミングされます。
・contain:画像の縦横比を維持して、指定した高さと幅で画像のすべてが収まるようにリサイズされます。
・none:そのままのサイズで表示される。
次の問題に進む前に、これらの挙動も確かめておきましょう。
