> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-image.md).

# AX - 画像

## 概要

**AX - 画像** Experience Sites ページ上で画像を表示し、サイズ変更、トリミング、配置、読み込み動作を制御できる Experience Cloud コンポーネントです。

Salesforce Content Documents、静的リソース、または外部 URL から、商品写真、ロゴ、バナー、プロフィール画像、その他あらゆるビジュアルコンテンツを表示するために使用します。Experience Builder で、コードなしで画像の表示、トリミング、拡大縮小を設定できます。

商品ギャラリー、ブランドヘッダー、ビジュアルコンテンツセクション、プロフィール表示、またはポータルでレスポンシブなサイズ調整が必要なあらゆる場所に最適です。

## チュートリアル

| 名前                                                                                                                                               | 説明                                                   |
| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- |
| [**マップを設定してレコード詳細情報を表示する**](/experience-cloud/experience-cloud-ja/chtoriaru/components/map/set-up-the-map-to-show-record-details-information.md) | Avonni Map を使用して Experience Cloud にレコードを表示する方法を学びます。 |

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前                                    | 説明                                    | 使用方法                                                          |
| ------------------------------------- | ------------------------------------- | ------------------------------------------------------------- |
| **CMS 画像または画像URL**                    | CMS から、または画像URLを直接使用して、画像のソースを指定します。  | 画像管理の方針に最も適したソースを選択し、簡単にアクセスおよび更新できるようにします。                   |
| **幅と高さ**                              | 表示する画像の幅と高さを決定します。                    | 画像の鮮明さを維持しながら、ページレイアウト内で調和よく収まる寸法を設定します。                      |
| **位置**                                | 画像の配置を調整します。                          | コンテナ内で画像を揃え、バランスの取れた見た目のよいページレイアウトを維持します。                     |
| **静的画像**                              | 画像を静的として設定するオプションです。                  | 画像にレスポンシブな調整が不要で、さまざまな画面サイズでも一定のままでよい場合にこの設定を使用します。           |
| **フルイド & フルイド拡張**                     | これらのオプションを使用すると、画像のサイズをレスポンシブに調整できます。 | これらの設定を有効にすると、画像が異なる画面サイズにスムーズに適応し、Webページのレスポンシブ性が向上します。      |
| **サムネイル**                             | 画像をサムネイルとして表示します。                     | このオプションを使用すると、ギャラリーやプレビューに適したコンパクトな形式で画像を表示できます。              |
| **遅延読み込み**                            | 画像の自動読み込みまたは遅延読み込みのいずれかを選択します。        | 即時表示とページ全体のパフォーマンスのバランスが取れた読み込み方法を選択して、ページの読み込み時間を最適化します。     |
| **トリミングサイズ、トリミングの適合、トリミング位置 X および Y** | 関連する部分に焦点を当てるために、画像のトリミングをカスタマイズします。  | 画像の重要な領域が目立つように表示され、視覚的な伝達効果が高まるよう、トリミングのパラメータを定義します。         |
| **拡大鏡タイプ**                            | 画像の詳細を表示するときに適用する拡大スタイルを選択します。        | 画像を詳しく確認できる拡大鏡タイプを選択して、ユーザー操作を向上させます。                         |
| **CMS 比較画像または比較URL**                  | 比較機能の属性をカスタマイズします。                    | 向き、操作、ラベル付けを決定する属性で比較機能を洗練し、使いやすい比較体験を実現します。                  |
| **比較属性**                              | 拡大機能の詳細を定義します。                        | ユーザーが画像の詳細を簡単に確認できるよう、拡大鏡の動作と外観をカスタマイズします。                    |
| **拡大鏡属性**                             | 画像の角の丸みを調整します。                        | 適切な border-radius を設定して画像の角を柔らかくしたりシャープにしたりし、画像のスタイル表現に寄与します。 |
| {% endtab %}                          |                                       |                                                               |

{% tab title="🎨 スタイリング" %}

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-image.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.