LightBox preserve aspect ratio on scale

[Fit2Page]

When scaling browser viewport the LightBox image aspect ratio is not preserved.

What can we do to make this work?

 

Thanks for yr time.

 

Marc

[Vessy]

Hello Mark,

The Lightbox supports auto sizing functionality that will re-scale the loaded image upon resizing. You can enable it by setting the ClientSettings.ContentResizeMode of the control to three different values depending on your requirements:

• Fit - Fits the image/iframe content to the available space but keeping the proportions at the same time
• Fill - Stretches the image/iframe to fill the available space
• None - If AutoResize = "true", RadLightBox will not resize the image if it is smaller than the available space yet it will make it fit proportionally if it is larger.

        <telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server">
            <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone"  ContentResizeMode="Fill">
            ...

In addition, you can find interesting blog post about zooming here:

https://www.telerik.com/blogs/browser-zoom---why-does-it-break-your-page-and-how-to-avoid-it

Regards,
Vessy
Progress Telerik

[Fit2Page]

Hi Vessy,

Thanks for your answer but I think I made not fully clear. This happens on browser scale not zoom. So just scale the viewport and I get attached images. The settings you mentioned do not have any effect om this.

 

BR,

Marc

[Vessy]

Hi Marc,

Did you try enabling the AutoSize=""true" feature of RadLightbox?:

        <telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" Modal="true"
            LoopItems="true" ZIndex="100000">
            <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone" 
                AutoResize="true" 
                ContentResizeMode="None">
                ...

If this does not bring the target result, can you send me a sample project containing some test images so I can examine the exact layout that is leading to the problem?

[Fit2Page]

Hi Vessy,

This turned out to be a conflict with one of my own stylesheets.

Thanks a lot for pointing!

 

Regards,

Marc

[Fit2Page]

Hi Vessy,

Thought it was one of my own style, but it is a conflict between Telerik LightBox style and Bootstrap.

I tested with Bootstrap 4 and 5 CSS and the problem with the non-proportinal scaling occurs, so like:

<asp:Image ID="Image1" Width="50" ImageUrl="~/UserFiles/Image/Shop/100000.png" runat="server" />

<telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" Modal="true"
            LoopItems="true" ZIndex="100000">
            <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone"
                AutoResize="true"
                ContentResizeMode="None"></ClientSettings>
    <Items>
        <telerik:RadLightBoxItem ImageUrl="UserFiles/Image/Shop/100044.png" TargetControlID="Image1"></telerik:RadLightBoxItem>
    </Items>
</telerik:RadLightBox>

 

in combination with:

 

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

 

Can you please assist on this; there must be more users who experience this flaw.

 

Regards,

Marc

[Vessy]

The linked Bootstrap styles contain a global selector setting the box-sizing which affects the LightBox sizing as well: 

        *, ::after, ::before {
            box-sizing: border-box;
        }

 

I can suggest you two possible solutions for this issue:

• you can unset the box-sizing for all elements on the page:
  

          *, ::after, ::before {
              box-sizing: unset;
          }

• or you can change the box sizing only for the LightBox images:
  

          .RadLightBox img {
              box-sizing: content-box;
          }

 

[Fit2Page]

Hi Vessy,

 

This works! Many thanks for your kind help.

 

Regards,

Marc

[Vessy]

You are welcome, Marc :)