1行加えるだけ！CSSで画像を簡単トリミング

ブログページなど、サイト上の画像サイズはそろっていた方がきれいに見えますよね？

でも現実は、すべてが同じサイズではないことも…。

今回は<img>に絶対値で横幅：高さ指定した際に、たった1行追加するだけで、画像がトリミングできちゃうCSSをご紹介します！

まずは基本のcss

img{
width:100px;
height:150px;
}

はい。これだけだと、縦横比が固定されずに画像自体がゆがんでしまいます。
そこで今回使うのが「object-fit」というプロパティーです！

画像の縦横比固定で、トリミングするには？

img{
width:100px;
height:150px;
object-fit: cover; /*追加するだけでOK！ */
}

今までposition プロパティーを使っていましたが、こっちの方がコードもきれいに整いますね♪

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。