openedx / openedx/paragon

[bug]: Card component stretches image on Safari

Open
#3,187 0 comments 0 reactions 1 assignee View on GitHub

@peterkulko is already working on this.

Since Feb 19, 2025.

bug
Dominant language
JavaScript
Stars
140
Forks
100
Avg merge
1h 3m
Merged PRs (30d)
30

Description

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.
image

Actual result:

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.