Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
roderickhsiao committed Jun 2, 2023
1 parent ec19e94 commit db28c50
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ To prevent layout shifts, it is recommended to define the dimensions of the imag

## How

This library employs a clever technique to create space based on the aspect ratio of an element. It utilizes a pseudo-element to achieve this effect, taking advantage of the (`aspect-ratio`)[https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio] property available in browsers like Chromium 88, Firefox 87, and Safari Technology Preview 118.
This library employs a clever technique to create space based on the aspect ratio of an element. It utilizes a pseudo-element to achieve this effect, taking advantage of the [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) property available in browsers like Chromium 88, Firefox 87, and Safari Technology Preview 118.

For browsers that do not support the `aspect-ratio` property, the library employs a technique commonly known as the "Padding trick." It creates a wrapper HTML tag with a height of zero and applies a percentage value to the padding-bottom property to preserve space. The padding-bottom value is calculated as a percentage of the component's width.

Expand Down

0 comments on commit db28c50

Please sign in to comment.