ResizeMode プロパティは、高さと幅がピクセル単位で設定されている場合に、バイナリ画像を自動的にサイズ変更するかどうかを決定します。BinaryImage は次の３つのサイズ変更モードをサポートします。
- Fit（自動調整）：画像の元のアスペクト比を変えずに、設定された高さと幅に合わせて画像のサイズを変更します。
- Fill（フィル）：画像を設定された高さと幅に引き伸ばします。
- Crop（トリミング）：設定された高さと幅を越えた画像領域を切り取ります。
このトピックでは、サイズ変更モードを切り替える方法、および出力結果に各モードがどのように表示されるかについて説明します。
デザイナの場合
- BinaryImage コントロールを選択し、スマートタグ
をクリックして［BinaryImage のタスク］メニューを開きます。 - ［高さ］を "100px" に、［幅］ を "100px" に設定します。
- ［サイズ変更モード］を "Fit" に設定します。
ソースビューの場合
Height（高さ）、Width（幅）、および ReziseMode（サイズ変更モード）を <cc1:C1BinaryImage> タグ内で設定して、BinaryImage コントロールのサイズを変更します。
<cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageUrl="~/Koala.png" Height="100px" ResizeMode="Fit" Width="100px" />
コードの場合
次のコードを Page_Load イベントに追加して、BinaryImage コントロールのサイズを変更します。
C# でコードを書く場合
| C# |
コードのコピー
|
|---|---|
| C1BinaryImage1.Height = 100; C1BinaryImage1.Width = 100; C1BinaryImage1.ResizeMode = C1.Web.Wijmo.Controls.C1BinaryImage.ImageResizeMode.Fit; |
|
Visual Basic でコードを書く場合
| Visual Basic |
コードのコピー
|
|---|---|
| C1BinaryImage1.Height = 100 C1BinaryImage1.Width = 100 C1BinaryImage1.ResizeMode = C1.Web.Wijmo.Controls.C1BinaryImage.ImageResizeMode.Fit |
|
ここまでの成果
プロジェクトを実行すると、サイズ変更モードに応じて画像のサイズが変更されます。
元の画像
次の図は、Fit モードで画像がどのように表示されるかを示しています。
次の図は、Fill モードで画像がどのように表示されるかを示しています。
次の図は、Crop モードで画像がどのように表示されるかを示しています。
