Scale images to Fit Tile

7 posts, 0 answers
  1. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 07 Jul 2015 Link to this post

    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>

  2. Vessy
    Admin
    Vessy avatar
    1384 posts

    Posted 10 Jul 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 23 Jul 2015 in reply to Vessy Link to this post

    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

  5. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 23 Jul 2015 Link to this post

    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

  6. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 24 Jul 2015 Link to this post

    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
  7. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 27 Jul 2015 in reply to Stanimir Link to this post

    I tried:

     .RadImageAndTextTile .rtileTopContent {
        margin: 0 auto;
    }

    and it did not center the image in the tile.

     Charles

  8. Vessy
    Admin
    Vessy avatar
    1384 posts

    Posted 30 Jul 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017