> 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 で、コードなしで画像の表示、切り抜き、拡大縮小を設定できます。

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

## 設定

### プロパティ

**CMS 画像** と **画像 URL または式** CMS または直接 URL から、画像のソースを指定します。画像管理の好みに最も適した方法を選べます。

**幅** と **高さ** 表示サイズを決定し、鮮明さを保ちながら画像がページレイアウトに自然に収まるようにします。

**位置** コンテナ内での画像の配置を調整し、バランスの取れた美しいレイアウトにします。

**静的画像** 画像を静的に設定します。レスポンシブな調整が不要で、画面サイズに関わらず一定に保つ必要がある場合に使用します。

**フルード** と **フルード拡大** 画像のサイズをレスポンシブに調整し、さまざまな画面サイズに滑らかに適応します。

**サムネイル** 画像をコンパクトな形式で表示します。ギャラリーやプレビューに適しています。

**遅延読み込み** 自動読み込みまたは遅延読み込みを選択してページの読み込み時間を最適化し、即時の表示と全体的なパフォーマンスのバランスを取ります。

**代替テキスト** 画像を説明する代替テキストを提供します。

**切り抜きサイズ**, **切り抜きのフィット**、および **切り抜き位置 X / Y** 画像の切り抜きをカスタマイズして、最も関連性の高い部分に焦点を当てます。

**拡大鏡の種類** 画像の詳細を表示する際に適用する拡大スタイルを選択し、 **拡大鏡の属性** 拡大鏡の動作と外観を微調整します。

**CMS 比較画像** / **比較画像の URL または式** と **比較属性** ビフォー/アフター比較ビューを有効にします。2 枚目の画像を設定し、その向き、操作、ラベルを制御できます。 **比較用代替テキスト** 比較画像の代替テキストを提供します。

## スタイリング

{% tabs %}
{% tab title="マージン" %}
画像の外側の余白を制御します。
{% endtab %}

{% tab title="パディング" %}
画像の内側の余白を制御します。
{% 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.