[bug]: Card component stretches image on Safari

[ihor-romaniuk]

Bugs

When using the Card component parameter, images will not display correctly when an image with a large vertical aspect ratio is loaded. In such cases, the component is greatly stretched vertically, which distorts its proportions and makes it visually unattractive.

Browsers

• Safari

Code example

Sandbox

<Card
  className="mb-4" 
  orientation={isSmall ? "vertical" : "horizontal"}
>
  <Card.ImageCap
    src="https://i.etsystatic.com/15125891/r/il/bc6b13/5877091810/il_fullxfull.5877091810_2mf0.jpg"
    srcAlt="Card image"
    logoSrc="https://via.placeholder.com/150"
    logoAlt="Card logo"
  />
  <Card.Body>
    <Card.Header
      title="Title"
      subtitle="Subtitle"
    />
    <Card.Section 
      title="Section title"
    >
      Here we want to display both Header and Section between ImageCap and Footer components, so we use Card.
      Body to accomplish that. 
    </Card.Section>
  </Card.Body>
  <Card.Footer orientation={isExtraSmall ? "horizontal" : "vertical"}>
    <Button>Action 1</Button>
    <Button>Action 2</Button>
  </Card.Footer>
</Card>

Expected result:

The image inside the Card maintains its proportions and is scaled within the available space of the component.

Actual result:

The image is greatly stretched horizontally and its proportions are distorted.