Keep Image Ratio on Browser Window Resize

AUTHOR: Veselina Raykova

DATE POSTED: September 12, 2018

DESCRIPTION

Keeping the image ratio when resizing the browser window is useful in scenarios when you want to show a banner-like gallery on the top of the page.

SOLUTION

As the designed behavior of RadImageGallery is to resize the width of the image depending on the height (but not th vice versa), we will need to modify both the CSS and client-side resizing logic of the control in order to resize its height:

1. Add the following styles to the page in order to size all wrappers depending on the view port size:
   
   html, body, form {

       margin: 0px !important; }

   .rigItemBox {

       width: 100% !important; }


   .RadImageGallery {

       background-color: transparent !important; }

   .rigToolbar {

       display: none; }

   .rigActiveImage img {

       padding: 0px !important;

       width: 100% !important;

       height: auto !important; }
2. Get the active Image height and set it as height to its wrapper. We should do that on initial load of RadImageGallery and each time the browser is resized:
   
   var $ = $telerik.$;

    

   function pageLoad() {

       $(".rigItemBox").height($telerik.$(".rigActiveImage img").height());

       $find('<%=RadImageGallery1.ClientID%>').playSlideshow();

       $(window).on('resize', function () {

           $(".rigItemBox").height($telerik.$(".rigActiveImage img").height());

       });

   }

Files