New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Resize Modes

BinaryImage
  • Demo Configurator
Image
ski.jpg swim.jpg

RadBinaryImage can automatically resize your image when required. It supports 3 different resize modes, specified by the ResizeMode property:

  • Crop - the image is cropped based on the specified control Width and Height. The CropPosition property determines the position of the cropping rectangle. The image is cropped only when the specified control Width and Height are smaller than the original image dimensions.
  • Fit - the image is fitted to the specified control Width and Height. Original image proportions are preserved. This setting allows your images to resize optimally based on a specified maximum width and height, while still preserving the original image proportions for best view.
  • Fill - the image is stretched or shrunk exactly to the specified control Width and Height. No proportions are preserved with this setting.

The default value of the ResizeMode property is None, meaning no resizing will be applied to the original image.

Note: All resizing settings require that both Width and Height is specified in RadBinaryImage. Omitting to specify any of these two properties will prevent image resizing.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.BinaryImage.ResizeModes.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadBinaryImage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <asp:Panel ID="BinaryImagePanel" runat="server" CssClass="imagecontainer demo-container size-narrow">
        <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="BinaryImage"
            Width="<%# Unit.Parse(WidthBox.Text) %>"
            Height="<%# Unit.Parse(HeightBox.Text) %>"
            ResizeMode="<%# Enum.Parse(typeof(BinaryImageResizeMode), ResizeModeCombo.SelectedValue) %>"
            CropPosition="<%# Enum.Parse(typeof(BinaryImageCropPosition), CropPositionCombo.SelectedValue) %>"></telerik:RadBinaryImage>
    </asp:Panel>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    Image
                    <br />
                    <asp:LinkButton ID="Image1Button" runat="server" CssClass="imgselector" OnClick="ChangeImage">
                        <asp:Image ID="SkiImage" runat="server" ImageUrl="Img/ski.jpg" AlternateText="ski.jpg" Width="60px"></asp:Image>
                    </asp:LinkButton>
                    <asp:LinkButton ID="Image2Button" runat="server" CssClass="imgselector" OnClick="ChangeImage">
                        <asp:Image ID="SwimImage" runat="server" ImageUrl="Img/swim.jpg" AlternateText="swim.jpg" Height="60px"></asp:Image>
                    </asp:LinkButton>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="WidthBox" runat="server" MinValue="100" MaxValue="425" AutoPostBack="true" Label="Width (px)" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>

                            <qsf:NumericTextBox ID="HeightBox" runat="server" MinValue="100" MaxValue="425" AutoPostBack="true" Label="Height (px)" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <b>Note:</b> Both Width and Height non-empty values required for a ResizeMode setting to apply.
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ResizeModeCombo" runat="server" AutoPostBack="true" Label="ResizeMode" Size="Wide">
                                <Items>
                                    <telerik:RadComboBoxItem Text="None" Value="None"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Crop" Value="Crop"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Fit" Value="Fit"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Fill" Value="Fill"></telerik:RadComboBoxItem>
                                </Items>
                            </qsf:ComboBox>

                        </li>
                        <li>
                            <asp:PlaceHolder ID="CropPositionPlaceHolder" runat="server" Visible='<%# ResizeModeCombo.SelectedValue == "Crop" %>'>
                                <qsf:ComboBox ID="CropPositionCombo" runat="server" AutoPostBack="true" Size="Wide" Label="CropPosition">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Left" Value="Left"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Right" Value="Right"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Center" Value="Center" Selected="true"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Top" Value="Top"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Bottom" Value="Bottom"></telerik:RadComboBoxItem>
                                    </Items>
                                </qsf:ComboBox>
                            </asp:PlaceHolder>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance