Card Image Image is not displayed as a whole

[Branko Gojkovic]

I'm new in blazor an have problem with image in card.

this is my code:

<div class="col-lg-12 control-section card-control-section">

    <div class="row card-layout">

        <div class="col-lg-6 col-md-6">

            @foreach (var data in items)

            {

                    <SfCard Orientation="CardOrientation.Vertical" ID="@data.ID.ToString()">

                        <CardStacked>

                        @if (data.ID != 0)

                        {

                            @if (data.Price2 == 0)

                            {

                                cijena = string.Format("{0,00:0.00} €", data.Price.ToString());

                            }

                            else

                            {

                                cijena = string.Format("{0,00:0.00} €", data.Price) + " / " + string.Format("{0,12:0.00} €", data.Price2);

                            }

                            _picUrl = picFolder + data.Image;

                        }

                            <CardImage Image="@_picUrl" title="@data.Text" TitlePosition="TitlePositions.TopLeft"></CardImage>

                            <CardHeader Title="@cijena" SubTitle="@data.Weight"></CardHeader>

                            <CardContent Content="@data.Description" EnableSeparator="true" />

                            <CardFooter>

                                <CardFooterContent>

                                </CardFooterContent>

                            </CardFooter>

                        </CardStacked>

                    </SfCard>

            }

        </div>

    </div>

</div>

<style>

    .e-card {

        padding-left: 0px;

        margin-bottom: 0px;

        width: auto;

        height: auto;

    }

        .e-card .e-card-image .e-card-title {

            font-family: cursive;

            font-style: italic;

            height: 55px;

    @* Menja visinu trake u nazivu artikla*@

        }

        .e-card .e-card-header .e-card-header-image {

            height: 28px;

            width: 28px;

            font-size: 14px;

            font-weight: bold;

            font-style: italic;

        }

        .e-card .e-card-content {

            font-size: 14px;

            font-style: italic;

            font-weight: bold;

            color: green;

            line-height: initial;

            font-weight: 500;

        }

    .e-card-title {

        font-size: 30px;

        font-style: italic;

        font-weight: bold;

        color: darkolivegreen;

    }

</style>

Attachment: problem_368103b6.rar

[Buvana Sathasivam]

Hi Branko, 

Greetings from Syncfusion support. 

 

We have checked your shared code and screenshot. We were able to replicate your problem. You can achieve your requirement by setting the background-size on the card image element as below. 

.e-card .e-card-image { 

   background-size: 100% 100%; 

} 

 

We have prepared a sample based on your shared code. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Card-622257960  

Please let us know if you have any queries. 

Regards, 

Buvana S 

[Branko Gojkovic]

This did a job.

Thanks.

Best regards form Montenegro!

[Buvana Sathasivam]

Hi Branko, 

Welcome,  

  

We are glad that your reported issues are resolved. Please get back to us if you need any further assistance. 

Regards, 

Buvana S