画像

概要

Avonni Image コンポーネントは柔軟性とカスタマイズ性を重視しており、画像をページにシームレスに組み込むことができます。このコンポーネントを使うことで、画像の表示、トリミング、比較、拡大、および読み込みを制御するための多くのオプションが利用可能です。

チュートリアル

名前	説明
レコードの詳細情報を表示するようにマップを設定する	Avonni マップを使用して Experience Cloud にレコードを表示する方法を学びます。

設定

🎛️ プロパティ

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

🎨 スタイリング