ホーム(記事一覧)へ

【IE対応】CSSで画像のトリミング

画像のトリミングで調べれば「object-fit」が出てきます。

しかしobject-fitはIEに対応していません。

IEでみたときに画像がつぶれるのは避けたいところ。

IEにも対応した画像のトリミング方法を解説します。

トリミング前の画像

ネコちゃんの画像です。横長の画像ですね。

ネコちゃんに注目してほしいのでトリミングしてみましょう。

なお、トリミングすると画像を拡大することになるため大きめの画像を用意しましょう。

【IE非対応】imgのトリミングはobject-fit

<style>
.example{
    width: 250px;
    height: 250px;
    /*コレ*/object-fit: cover;
}
</style>
<img src=https://csshtml.work/wp-content/uploads/cat.jpg class="example" alt="">

object-fitを使うとimgをトリミングできます。高さと幅もしっかり指定しましょう。

しかし、object-fitはIEでは効きません。

上記画像をIEで見るとわかりますが潰したような画像になります。

【IE対応】backgroundでトリミング

<style>
.example2{
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    width: 250px;
    height: 250px;
}
</style>
<div class="example2"></div>

結論から言うとbackgroundを利用します。imgのままトリミングはできません。(javascriptなどを使うことになります。)

divでトリミングサイズを作ります。

backgroundで画像のurlを指定します。

no-repeatで1枚の画像として使います。

center centerは中心を基準にする設定です。ずらすことも可能です。

coverは範囲内と画像が収まるようにする設定です。

レスポンシブ対応 トリミング

↓ブラウザの幅を狭めて確認してみてください。

<style>
.example3{
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
}
</style>
<div class="example3"></div>

widthをvwで指定しています。これはブラウザの幅を100vwとした割合の設定です。

heightも同じくvwで指定しています。%では縦を基準にしてしまいます。autoでは0になってしまいます。padding-topでは最大の高さを制限できません。

さて、vwで設定するとパソコンでフルブラウザにしたとき画像が大きくなりすぎてしまいます。

そこでmax-widthとmax-heightで大きくなりすぎないように最大サイズを指定します。

正方形 トリミング

正方形にトリミングしたい場合、widthとheightを同じ数値にしましょう。

<style>
.example3{
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
}
</style>
<div class="example3"></div>

角丸 トリミング

正方形サイズにトリミングしたい場合、border-radiusを設定しましょう。

<style>
.example4{
    /*コレ*/border-radius: 20px;
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
}
</style>
<div class="example4"></div>

正円 トリミング

正円にトリミングしたい場合、widthとheightを同じ数値にし一度正方形にした後border-radius: 50%を指定しましょう。

<style>
.example5{
    /*コレ*/border-radius: 50%;
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
}
</style>
<div class="example5"></div>

拡大

画像の拡縮にはbackground-sizeを設定します。

<style>
.example6{
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / 400% auto;
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
}
</style>
<div class="example6"></div>

backgroundの「/」の後がbackground-sizeです。

「background-size:横 縦」と指定します。横も縦も同じ数値を指定してもいいですが、調整するたび両方直すのはメンドウなので片方はautoにしましょう。アスペクト比を保って自動で変わってくれます。

この数値はpxでも%でも指定できます。レスポンシブ対応を考えると%がいいでしょう。

縮小

画像の拡縮にはbackground-sizeを設定します。

ただし数値によっては画像が外側のdivより小さくなり正方形ではなくなってしまいます。

最小値はcoverとし、それより小さくしたいときはdivそのものを小さくしましょう。

<style>
.example7{
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    width: 30vw;
    height: 30vw;
    max-width: 300px;
    max-height: 300px;
}
</style>
<div class="example7"></div>

上寄せ

画像の位置(トリミング範囲)を調整するにはbackground-positionを指定します。

<style>
.example8{
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center 20% / 400% auto;
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
}
</style>
<div class="example8"></div>

backgroundの「center center」の部分がbackground-positionです。

「background-position:横 縦」と指定します。

上寄せにしたい場合は縦の部分の数値を調整します。

pxならマイナス指定、%ならプラス指定をすると画像が上側に移動します。実質上側のトリミングです。

下寄せ

下寄せの場合は「background-position:横 bottom 数値」と設定します。

「background-position:横 bottom 20%」と

「background-position:横 80%」は同じです。

<style>
.example9{
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center bottom 20% / 400% auto;
    width: 40vw;
    height: 40vw;
    max-width: 400px;
    max-height: 400px;
}
</style>
<div class="example9"></div>

【まとめ】画像のトリミング

IE無視ならimgにobject-fit: cover

IE対応ならbackgroundでトリミング

  • 正方形や丸はdivの大きさを調整
  • 拡大縮小はbackground-size
  • 位置(トリミング範囲)調整はbackground-position

以上、IEにも対応した画像のトリミング方法でした。

関連記事