responsive images

[Bob]

How does one make the image responsive using the scroll-view component?  Here is my current code:

<kendo-scrollview
*ngIf="hasMedia"
[data]="items"
[width]="width"
[height]="height"
[arrows]="true"
[pageable]="true">
<ng-template let-item="item">
<h2 class="demo-title">{{item.title}}</h2>
<img src='{{item.url}}' alt='{{item.title}}' draggable="false" />
</ng-template>
</kendo-scrollview>

[Martin]

Hi Bob,

Thanks for the provided snippet.

I am not sure what exactly "responsive image" should mean in this context, but in order to make the images responsive (in terms of resizing dynamically along the viewport) in the ScrollView component set the [width] option to 100% and set the image width CSS property to 100% too:

<kendo-scrollview
   [data]="items"
   [width]="width"
   ...
   >
     <ng-template let-item="item">
         <h2 class="demo-title">{{item.title}}</h2>
         <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{width: '100%'}" draggable="false" />
     </ng-template>
 </kendo-scrollview>

Here is an example:

https://stackblitz.com/edit/angular-zxyuab?file=app/app.component.ts

If the above suggestion doesn't help, could you please explain in further details how the image is expected to behave when we resize the component. Thank you in advance.

Regards,
Martin
Progress Telerik

[Bob]

Please find attached two screen captures, one using a desktop size of SXGA (1280x1024 resolution) and one for WSXGA (1680x1050 resolution).  As a responsive image I would expect the full height of the image to be displayed and the width to be adjusted according to the height.  The xample from the larger resolution cuts off the bottom of the image.  If you were to use images of different pixel resolution from bit.ly rather than using the same size I am sure you see the problem.  One should be able to scroll a gallery of different image sizes and have the whole image displayed in the component viewport, not cutting off when given height is reached.

[Martin]

Hi Bob,

Thanks for the provided screenshots.

One way to display images of different sizes without cutting their edges in a ScrollView component is by setting the width and height properties of the image to 100%, nested inside an ng-template:

<ng-template let-item="item">
         <h2 class="demo-title">{{item.title}}</h2>
         <img src='{{item.url}}' alt='{{item.title}}' style="width: 100%; height: 100%" draggable="false" />
       </ng-template>

Indeed there is no built-in option to change the height of the component based on the image dimensions. What could be done is to dynamically change the [height] option of the ScrollView component according to the window width.

Here is an example demonstrating the suggested approach:

https://stackblitz.com/edit/angular-aqzpqr?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Bob]

I think this is at a dead end.  I use Telerik components along with ngx-bootstrap in my angular project.  I will scrap the scroll view and use the ngx-bootstrap carousel component.

The first image has a resolution of 1280X960, fairly typical for a digital camera.  The second is a collated image at resolution 1920x514.  Both images are askew with your settings.  I have attached captures from the scroll view and the orginal images.

Thanks for the help.

[Dimiter Topalov]

Hi Bob,

I am sorry if there was some misunderstanding arising from the suggestions provided so far, but the ScrollView cannot adapt both its width and height dynamically based on the content - if the image is displayed at its full width, depending on the width/height ratio the content on the other axis will be cropped or skewed. Can you please provide some screenshots or other visual of the expected outcome based on the two already linked images?

If the expected outcome is the whole ScrollView component to change both its width and height dynamically so that they match the ones of the currently displayed image, I am afraid that such behavior is not supported.

Regards,
Dimiter Topalov
Progress Telerik