画像トリミング実装例

正方形（1:1）- プロフィール写真等

プロフィール

中央トリミング

16:9 - ヒーロー画像等

サービス画像

3:4 縦長 - ポートレート等

ブログ画像

上部基準

ブログ画像

中央基準

カスタム比率（例: 4:3）

設備画像

使用方法

// 1. コンポーネントをインポート
import ImageCropExample from '../components/ImageCropExample.astro';

// 2. 使用（Astroファイル内で）
<ImageCropExample 
  src="/images/profile/photo.jpg" 
  alt="プロフィール写真"
  aspectRatio="square"        // square | video | portrait | custom
  objectPosition="center"     // center | top | bottom | left | right
  class="rounded-lg shadow-md" // 追加のTailwindクラス
/>

// カスタム比率の場合
<ImageCropExample 
  src="/images/hero.jpg" 
  alt="ヒーロー画像"
  aspectRatio="custom"
  customRatio="aspect-[21/9]"
  objectPosition="center"
/>