Skip to content

Commit 00ffc03

Browse files
author
David Luhr
authored
Update README with aspect-none notes
1 parent daecd94 commit 00ffc03

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

README.md

+7
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@ Use `aspect-none` to remove any aspect ratio behavior:
4848
</div>
4949
```
5050

51+
When removing aspect ratio behavior, if nested elements have `w-{n}` or `h-{n}` classes, ensure they are re-declared with a matching breakpoint prefix:
52+
53+
```html
54+
<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
55+
<img src="..." alt="..." class="w-full h-full object-center object-cover lg:w-full lg:h-full" />
56+
</div>
57+
```
5158

5259
Note that due to the way this currently needs to be implemented ([the old padding-bottom trick](https://css-tricks.com/aspect-ratio-boxes/)) you need to assign the aspect ratio to a _parent_ element, and make the actual element you are trying to size the only child of that parent.
5360

0 commit comments

Comments
 (0)