マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 1行加えるだけ!CSSで画像を簡単トリミング

Mighty Ace Blog

マイティーBlog

デザイン

2021.03.31

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アナリティクス設定項目チェックシート(無料)

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

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.