今回は画像サイズがバラバラな状態から、たった一行CSSを付け加えるだけで画像をトリミングできる方法をお伝えします。
結論から言ってしまうと今回使用するプロパティーは「object-fit」になります。
おそらく聞いたことある人も多いかもしれません。
具体的な使用法ですが、本当に簡単です。
通常であれば
img {
width:100px;
height:100px;
}
としますよね。そうすると画像が縦や横に伸びて変な感じになりますが、先程紹介したプロパティーを追加してみてください。
img {
width:100px;
height:100px;
object-fit:cover;
}
これだけです！本当に簡単ですよね！
ただ、、、
自分が配置したい箇所が必ずしも中央にあるとは限りませんよね？
中央以外でトリミングしたい場合だってあります。
安心してください。こちらも簡単です。
今度は「object-position」プロパティーを設定しましょう。
object-position :縦の位置 横の位置;
このようにすれば簡単にお好みの部分にフォーカスしてトリミングすることができます。
今回は簡単にトリミングする方法を紹介しました。
今までpositionを使ってきた方からすれば早く紹介してよと言われそうな気がします...
では!