[bug]: Card component stretches image on Safari
Open
@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
<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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.