See the Pen
See the Pen
こんなデザインどのようにして作りますか
このような画像を作るとき、皆さんはどのように作るでしょうか。
さすがに今は少なくなってきましたが、
一昔前だと、こういった丸角の画像をペイントソフトで作ってからペタっと貼り付けるのが普通でしたが、現在のCSSではスタイルの指定で簡単にトリミングが簡単にできます。
例えば、これまでの方法としてはbackgroundを使った方法です。
画像を背景として配置すると、はみ出た部分は表示されないためトリミングされたような状態になります。
これまでは、backgroundを使っていた人も多いかもしれません。
指定の方法もobject-fitとよく似ていますが、backgroundで設定する場合はこんな感じで少しコードが多くなってしまいます。
backgroundトリミング by Yoshimune (@hachidaime)
on CodePen.
CSSでトリミングすることのメリット
画像のトリミングがCSSで簡単に
後ほど紹介しますが、たった1行で画像のトリミングを行うことができます。
backgroundを使った方法と違って、画像要素を画像のまま使用できる(<img>として存在する)ので、構造化データとしても適切です。
CSSでのトリミングは変更が簡単
デバイスによって、可変領域が変わることも多いので、ペイントソフトであらかじめトリミングされた画像では柔軟性がありません、ちょっとした調整にわざわざペイントソフトで作り直さないといけません。
※昔はそうだった・・・
トリミング程度であれば、CSSで操作しておくと変更も簡単です。
写真に最適なjpgで対応できる
CSSでトリミングできれば、画像自体はjpgでも問題なく角の部分を透過させることができます。
object-fitの使い方
画像のトリミングがCSSで簡単に
使い方は非常に簡単なので、皆さんすぐに使えるでしょう。
実際に見てみる方がわかりやすいでしょう。
object-fit by Yoshimune (@hachidaime)
on CodePen.
角丸などのトリミングはobject-fitでたった1行の簡単設定
今日は、object-fitについて紹介していきたいと思います。
object-fitの特徴は、非常に指定がシンプルであることです。
現在では、レスポンシブデザインというデバイスのサイズによってホームページの見せ方を変えるというのが普通ですが、そういったこともあって各要素のレイアウトの柔軟性が求められる時代になっています。
写真画像はファイル形式がjpgがいいのですが、丸角の画像を作る場合は角の部分を透過させるためにpngで作成する必要がありファイルサイズが大きくなる傾向がありました。
object-fitを実際に使ってみましょう。
いずれもはみ出た部分がトリミングされます。
object-fit
他の記事を検索: