> For the complete documentation index, see [llms.txt](https://docs.ccfolia.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ccfolia.com/update/v1.28/trimming.md).

# 前景・背景の自動トリミング機能

前景・背景に画像を設定する際、画像が自動でトリミングされる設定にできるようになりました。

***

## 前景・背景の自動トリミング

これまで、前景や背景に画像を設定すると、「フィールド設定」の幅に合うように画像の比率が変更されていました。v1.28で、画像の比率を変えずに前景や背景に設定し、表示しきれない部分をトリミングすることができるようになりました。

***

### 設定方法

1. 右下の![](https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FXoIsL0PAr3Mriuvtx3CB%2Fimage.png?alt=media\&token=a77e595c-4b5b-4cfa-a004-b32be84d1e3f)ボタン>前景・背景を変更からフィールド設定を開く
2. 「画像を自動トリミングする」のトグルスイッチをONにする

以下の画像のように「画像を自動トリミングする」の横が青くなっていれば自動トリミング機能が適用されています。

<div align="center"><figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FdXwBv0acjf5EFFFhLKML%2F128_03_triming.png?alt=media&amp;token=afac76e3-b412-4b1d-b784-be631e3c800c" alt="" width="292"><figcaption></figcaption></figure></div>

***

### 自動トリミングを適用しない・する場合の比較

以下の正方形の画像を、横長のフィールドに前景として設定してみます。

<div align="center"><figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FCLCptR6l8itDfaQ2gpb6%2F128_04_%E7%94%BB%E5%83%8F.png?alt=media&amp;token=f7ae3b25-6a19-4d36-903f-33f9fbc243fd" alt="" width="188"><figcaption></figcaption></figure></div>

#### 自動トリミング機能をオフにした場合

<div align="center"><figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FYfk0p9lQ9hAssF51Ghff%2F128_05_screenshot.png?alt=media&amp;token=033c029e-be9c-49fc-84d8-c05d462b514d" alt="" width="498"><figcaption></figcaption></figure></div>

上下が圧縮されます。

#### 自動トリミング機能をオンにした場合

<div align="center"><figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FApVuzmyjK6f1AWCE8Z9B%2F128_06_screenshot2.png?alt=media&amp;token=1ad66caa-48a3-4b1d-8eca-e17d0a9b87e1" alt="" width="478"><figcaption></figcaption></figure></div>

上下がトリミングされます。
