Binary Image

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

BinaryImage - Resize Modes

BinaryImage
Configure RadBinaryImage
Image: ski.jpg swim.jpg
Width: px
Height: px
ResizeMode:
select
Note: Both Width and Height non-empty values required for a ResizeMode setting to apply.
HTML Output

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.

C# VB
Show code in new window Demo isolation steps
<%@ 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET BinaryImage Demo - Resize Modes</title>
    <link rel="Stylesheet" type="text/css" href="Styles.css"/>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:radajaxpanel id="RadAjaxPanel1" runat="server">
        <asp:panel id="BinaryImagePanel" runat="server" cssclass="imagecontainer">
            <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>
        <fieldset class="settings">
            <legend>Configure RadBinaryImage</legend>
            <table>
                <tbody>
                    <tr>
                        <td>
                            Image:
                        </td>
                        <td>
                            <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>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Width:
                        </td>
                        <td>
                            <telerik:radnumerictextbox id="WidthBox" runat="server" minvalue="20" maxvalue="425" autopostback="true">
                            </telerik:radnumerictextbox> px
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Height:
                        </td>
                        <td>
                            <telerik:radnumerictextbox id="HeightBox" runat="server" minvalue="20" maxvalue="425" autopostback="true">
                            </telerik:radnumerictextbox> px
                        </td>
                    </tr>
                    <tr>
                        <td>
                            ResizeMode:
                        </td>
                        <td>
                            <telerik:radcombobox id="ResizeModeCombo" runat="server" autopostback="true">
                                <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>
                            </telerik:radcombobox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <b>Note:</b> Both Width and Height non-empty values required
                            for a ResizeMode setting to apply.
                        </td>
                    </tr>
                    <asp:placeholder id="CropPositionPlaceHolder" runat="server" visible='<%# ResizeModeCombo.SelectedValue == "Crop" %>'>
                    <tr>
                        <td>
                            CropPosition:
                        </td>
                        <td>
                            <telerik:radcombobox id="CropPositionCombo" runat="server" autopostback="true">
                                <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>
                            </telerik:radcombobox>
                        </td>
                    </tr>
                    </asp:placeholder>
                    <tr>
                        <td colspan="2" class="outputcell">
                            HTML Output
                            <textarea id="outputPanel" rows="4" cols="20" class="outputPanel"></textarea>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <telerik:radscriptblock id="RadScriptBlock1" runat="server">                
                <script type="text/javascript">
                    function pageLoad()
                    {
                        var imagePanel = $get("<%= BinaryImagePanel.ClientID %>");
                        var outputPanel = $get("outputPanel");
                        outputPanel.innerHTML = $telerik.htmlEncode(imagePanel.innerHTML).trim();
                    }
                </script>
            </telerik:radscriptblock>
        </fieldset>
    </telerik:radajaxpanel>
    </form>
</body>
</html>