CSSだけで画像をトリミングする3つの方法

cssだけで画像を変に引き延ばさずにトリミングする方法です。

デモページ

1 画像をbackgroundとして使うタイプ

imgとして置かずに、divなどのbackgroundとして使うタイプです。background-sizeをcoverにして、背景領域を完全におおう最小サイズで出しています。

HTML

CSS

2 positionを使うタイプ

img要素を包んでいる要素(ここでは.box2 .img_cover)にposition:relativeを、imgにposition:absoluteをそれぞれ付けて、imgを.box2 .img_coverを基準にした絶対位置にしています。img要素をtopとleftで50%ずつ移動させ、要素の表示位置をtransform:translateを-50%で調整して画像を真ん中へ持って来ます。

HTML

CSS

3 object-fitを使うタイプ

object-fitプロパティを使うやり方。1行書くだけで実装できます。とても楽でいいのですが、IE勢はお察しの通りなので、対策が必要です。

HTML

CSS

Can I use object-fit?

 

object-fitをIEに効かせるjsがあります↓
object-fit-images ※GitHubページ

object-fit-imagesをGitHubからDLしてきたら、jsなどを読み込み、下記をcssに追記。

これでIEにもobject-fitが効くようになります。
IEはいつ滅びるんですかね?

  • コーダーのための計算機