images in MudCardMedia are blurry, the default Height is 300, changing the height in style to auto won’t display the images. I don’t want the height to be hardcoded.

       <MudGrid Spacing="10">

           @foreach (var product in productOfGroupType)
           {
               <MudItem xs="6" sm="6" md="4" lg="3" xl="2">
                   <MudCard id="@product.GroupType">
                       <MudCardMedia Image="@product.Photo" @onclick="() => ToggleOpen(product.ProductName)"/>
                       <MudCardContent>
                           <MudText Typo="Typo.h6" Class="truncate">@product.ProductName</MudText>
                           <MudText Typo="Typo.subtitle1">@product.Price</MudText>
                           <MudText Typo="Typo.subtitle1">@product.Description</MudText>
                       </MudCardContent>
                       <MudCardActions>
                           <MudButton Variant="Variant.Text" Color="Color.Primary" @onclick="() => AddToCart(product)">@StringConsts.ADD_TO_CART</MudButton>
                           <MudButton Variant="Variant.Text" Color="Color.Primary" @onclick="() => OnNavigateProduct(product)">@StringConsts.MORE_INFO</MudButton>
                       </MudCardActions>
                   </MudCard>
               </MudItem>
           }
       </MudGrid>