Skip to content

Commit

Permalink
docs: update aspect ratio cookbook article
Browse files Browse the repository at this point in the history
  • Loading branch information
johannschopplich committed Apr 18, 2023
1 parent 84b3955 commit ad56989
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 9 deletions.
18 changes: 9 additions & 9 deletions docs/cookbook/aspect-ratio.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
# Cookbook

## Setting Aspect Ratio for Blurry Placeholders
# Aspect Ratio for Blurry Placeholders

In certain cases, the blurry placeholder might not have the full image width and height. To ensure that the layout does not change when the full-quality image loads and to maintain a consistent user experience, you can add the `aspect-ratio` CSS property to the `style` attribute to your images.

By setting the aspect ratio for your blurry placeholders, you can:

- Prevent layout shifts as the full-quality image loads.
- Ensure that the image container maintains its dimensions even before the full-quality image is loaded.

## Usage

Calculate the aspect ratio using the dimensions of the full-quality image (width / height) and apply it to the `<img>` tag:

```html
Expand All @@ -14,11 +19,6 @@ Calculate the aspect ratio using the dimensions of the full-quality image (width
data-sizes="auto"
width="1600"
height="900"
style="aspect-ratio: 16 / 9;"
style="aspect-ratio: 16/9;"
>
```

By setting the aspect ratio for your blurry placeholders, you can:

- Prevent layout shifts as the full-quality image loads.
- Ensure that the image container maintains its dimensions even before the full-quality image is loaded.
4 changes: 4 additions & 0 deletions docs/cookbook/index.md
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
# Cookbook

This is a collection of recipes for common use cases, since unlazy is a flexible library that can be used in many ways. If you have a use case that is not covered here, please [open an issue](https://github.com/johannschopplich/unlazy/issues).

- [Aspect Ratio for Blurry Placeholders](/cookbook/aspect-ratio)

0 comments on commit ad56989

Please sign in to comment.