Scale images to Fit Tile

[Charles]

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>

[Vessy]

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

[Charles]

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

[Charles]

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

[Stanimir]

Hi,

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

.RadImageAndTextTile .rtileTopContent {
    margin: 0 auto;
}

Regards,
Stanimir
Telerik

[Charles]

I tried:

 .RadImageAndTextTile .rtileTopContent {
    margin: 0 auto;
}

and it did not center the image in the tile.

 Charles

[Vessy]

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