LightBox preserve aspect ratio on scale

1 Answer 9 Views
LightBox
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
Fit2Page asked on 10 Nov 2021, 10:43 AM

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

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 15 Nov 2021, 10:20 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 15 Nov 2021, 12:08 PM

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
Telerik team
commented on 15 Nov 2021, 05:21 PM

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
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 18 Nov 2021, 10:33 AM

Hi Vessy,

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

Thanks a lot for pointing!

 

Regards,

Marc

Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 18 Nov 2021, 10:53 AM

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
Telerik team
commented on 18 Nov 2021, 05:02 PM

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
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 19 Nov 2021, 08:20 AM

Hi Vessy,

 

This works! Many thanks for your kind help.

 

Regards,

Marc

Vessy
Telerik team
commented on 19 Nov 2021, 10:53 AM

You are welcome, Marc :)
Tags
LightBox
Asked by
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Vessy
Telerik team
Share this question
or