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

Scale images to Fit Tile

6 Answers 91 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Charles
Top achievements
Rank 1
Charles asked on 07 Jul 2015, 07:30 PM

Is there a way to have the control scale the image to fit the width of the tile? I would like to show images in the tiles that are much larger than the standard widths of the tiles and everything I try ends up with the image clipped to fit. Since I don't always control the image shown, I need the image to scale down and fit in the tile. Can you show me how to do this? I am databinding with a list(of T). Thanks.

<telerik:RadTileList runat="server" ID="RadTileList1" AppendDataBoundItems="true" TileRows="4">
<DataBindings>
    <CommonTileBinding TileType="RadImageTile" Shape="Wide" DataTitleTextField="TileTexts" DataNavigateUrlField="tileNavUrls" />
    <ImageAndTextTileBinding DataTextField="TileTexts" DataImageUrlField="TileImagePaths" />
</DataBindings>
<Groups>
<telerik:TileGroup Name="Featured Vehicles">
<telerik:RadContentTemplateTile runat="server" Shape="Square" CssClass="noHover">
<ContentTemplate>
<div class="groupHeadingTitle">
<div class="innerTitle">Featured<br />
Vehicles</div>
</div>
</ContentTemplate>
</telerik:RadContentTemplateTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>

6 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 10 Jul 2015, 03:16 PM
Hi Charles,

You can control the scaling of the images inside RadImageAndTextTile by cascading to the rendered image element and applying the desired CSS class to it. For example, you can do it in a similar way:
.RadImageAndTextTile img.rtileContentImage
{
    width: 100%;
}

Of course, you can feel free to modify the snippet above in order to make the selector more specific, or setting fixed width to the image in pixels, depending on the tile's width. I hope this helps.

Regards,
Vessy
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Charles
Top achievements
Rank 1
answered on 23 Jul 2015, 07:27 PM

Thank you. That was helpful. The image aspect ratio is not known as the images can be different shapes. Can you help me with the css that would fit the image in the tile without being cut off and center it horizontally? The snippet you gave me works for square tiles but the image is cut off at the bottom when the tiles are set to wide.

 Thanks.

 

Charles

0
Charles
Top achievements
Rank 1
answered on 23 Jul 2015, 07:30 PM

I got the image to fit with:

.RadImageAndTextTile img.rtileContentImage
{
width: auto;
max-height:150px;
}

 Any Idea on how to center it horizontally in the tile? margin-left:auto; margin-right:auto does not work.

Thanks.

 

Charles

0
Stanimir
Telerik team
answered on 24 Jul 2015, 01:49 PM
Hi,

You need to set the margin of the image's parent element to 0 auto.

.RadImageAndTextTile .rtileTopContent {
    margin: 0 auto;
}


Regards,
Stanimir
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Charles
Top achievements
Rank 1
answered on 27 Jul 2015, 02:01 PM

I tried:

 .RadImageAndTextTile .rtileTopContent {
    margin: 0 auto;
}

and it did not center the image in the tile.

 Charles

0
Vessy
Telerik team
answered on 30 Jul 2015, 08:44 AM
Hi Charles,

Another way to try to try to center the image is to apply text-align style to it like follows:
.RadImageAndTextTile .rtileTopContent
{
    text-align: center;
}


Please, give this suggestion a try and let me know how it goes.

Regards,
Vessy
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TileList
Asked by
Charles
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Charles
Top achievements
Rank 1
Stanimir
Telerik team
Share this question
or