動的な部分やPC、SPで画像の対比が変わる時、1つ1つ画像を書き出すのはめんどくさいですよね。
今時CSSだけで簡単に画像とリミングができるので、今回紹介します。
CSSだけで画像トリミングする方法
まずは普通に画像サイズ指定してみると・・・
img {
width: 500px;
height: 500px;
}
画像の対比が変わってしまうよね・・・。
今回は「object-fit:cover」を使います。
では、トリミングするコードを追加するとこんな感じ。
img {
width: 500px;
height: 500px;
object-fit: cover;
}
何も考えずとも中央で画像が幅：500px 高さ:500pxでトリミングされます。
めちゃくちゃ簡単！！
画像のトリミング位置を指定してトリミングする
トリミングできても中央だけじゃちょっと・・・という場合も安心！
「object-position」でトリミング位置も調整可能です。
「object-position: 横位置 縦位置;」で調整できます。
img {
width: 500px;
height: 500px;
object-fit: cover;
object-position: 0 100%;
}
object-fitのIE11対応について
この前ほぼほぼ主要ブラウザは対応したもののIE11のみ非対応。
IE11はまだ使っている人多いので見逃せませんよね。
早くサポート切ってほしい。
IE11のためにコードを追加するのも面倒なので、JSで実装します。
プラグインがあるのでI11対応も楽々です。
・「fitie.js」を読み込ませます。
以上！
「object-position」がこれだけでは対応できませんが、中央でいいよって方ならこれが一番楽にI11対応させる方法です。
ABOUT ME
