This is a migrated thread and some comments may be shown as answers.

Image Galllery stretches images affectinng aspect ratio

8 Answers 165 Views
ImageGallery
This is a migrated thread and some comments may be shown as answers.
WEBSRFR
Top achievements
Rank 1
WEBSRFR asked on 22 Dec 2014, 03:45 PM
I am having a strange issue where Image Gallery is squishing some images that are in portrait format severely affecting their aspect ratio. IMHO photos should never have their aspect ratio altered as the results are never pleasing.

How can I configure Image Gallery to leave the aspect ratio of images as is and not stretch or squish photos it displays?

Thanks so much!

8 Answers, 1 is accepted

Sort by
0
Deyan Enchev
Telerik team
answered on 25 Dec 2014, 11:20 AM
Hi,

By default the ImageGallery does not alter the image’s aspect ratio and it just displays a set of predefined images. As my colleague Angel Petrov has explained in the other ticket you have opened: “Rather it should try to resize them to fit the image area.”. The only built-in property that will introduce changes to the way image is displayed is the ResizeMode – it could be either “Fill” or “Fit” but surely none of those will behave as the screenshot you have shared.

Still I would encourage you to stick to one support channel per case as this is the most effective way. So I suggest that you continue to discuss the issue in this support thread (which you have initiated).

Furthermore, providing a sample project that we can use for replicating the issue will inevitably lead to faster and straighter to the point response.


Regards,
Deyan Enchev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
WEBSRFR
Top achievements
Rank 1
answered on 27 Dec 2014, 05:55 PM
Thanks for your response. I will use the support ticket I created to continue seeking a resolution to this issue but in case anyone else is having this issue, I think it may have something to do with Bootstrap that is included by default in ASP.net projects. I noticed the same image distortion of portrait orientation photos on Firefox, Chrome and Internet Explorer. On each Web browser if I resize the window then the photo "resets" to the correct aspect ratio.

[quote]Deyan Enchev said:Hi,

By default the ImageGallery does not alter the image’s aspect ratio and it just displays a set of predefined images. As my colleague Angel Petrov has explained in the other ticket you have opened: “Rather it should try to resize them to fit the image area.”. The only built-in property that will introduce changes to the way image is displayed is the ResizeMode – it could be either “Fill” or “Fit” but surely none of those will behave as the screenshot you have shared.

Still I would encourage you to stick to one support channel per case as this is the most effective way. So I suggest that you continue to discuss the issue in this support thread (which you have initiated).

Furthermore, providing a sample project that we can use for replicating the issue will inevitably lead to faster and straighter to the point response.


Regards,
Deyan Enchev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
[/quote]
0
Deyan Enchev
Telerik team
answered on 31 Dec 2014, 02:24 PM
Hello,

When a resolution to that issue is found I would encourage you to post it here and share it with the rest of the community hence more users may experience the same problem.

It appeared that your assumption is correct and there seem to be a problem with bootstrap and ImageGallery control which will be further investigated.


Regards,
Deyan Enchev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
WEBSRFR
Top achievements
Rank 1
answered on 31 Dec 2014, 04:06 PM
Thank you so much for so promptly investigating issue.

Bootstrap support of your controls is essential as pretty must most new ASP.net applications will be built based on bootstrap as that is now a default part of an ASP.net project.

I hope you have a resolution to this issue soon.
0
Deyan Enchev
Telerik team
answered on 01 Jan 2015, 03:09 PM
Hi once more,

Because of the fact many of our users wanted bootstrap themes integration with the Telerik.UI suite we firmly decided to move forward. Currently in progress are few tasks that will make the Telerik.UI suite fit alongside the Bootstrap widgets.

You can see our Product Manager - Rumen Jekov comments under this feature request:

http://feedback.telerik.com/Project/108/Feedback/Details/38808-bootstrap-themes-integration


Regards,
Deyan Enchev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Chris
Top achievements
Rank 1
answered on 13 Jan 2015, 05:29 PM
Good morning,
FYI - both links to the "prior" support ticket do not function properly.

My impression is that you are acting as if this problem is not real. I have just encountered the EXACT SAME ISSUE. In fact, it is to extreme that the portrait image that is being displayed is squished horizontally into maybe 100px or so when it should be at 1000.

This is a SIMPLE web page. Only one control on it - the RadImageGallery - with 33 pictures - and everyone that is in portrait mode is a problem.

It seems a shame that I have to spend my time trying to find another solution now... for I am under the gun and thought this would be an easy solution....

Sigh... do computers ever really work??

Chris
0
Milena
Telerik team
answered on 16 Jan 2015, 09:53 AM
Hello Chris,

Our dev team provided a fix for the issue you are facing. The fix will be part of our next internal build, which will be released next week. You can download this version of the controls or use the following workaround:

div.RadImageGallery .rigActiveImage img {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box; }

I hope this helps.

Regards,
Milena
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Asfand
Top achievements
Rank 1
answered on 16 Nov 2017, 03:45 PM
@Milena

This fixed the issue for me, thanks!
Tags
ImageGallery
Asked by
WEBSRFR
Top achievements
Rank 1
Answers by
Deyan Enchev
Telerik team
WEBSRFR
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Milena
Telerik team
Asfand
Top achievements
Rank 1
Share this question
or