Skip to content

Commit 3f99122

Browse files
Merge pull request #188 from AllThingsSmitty/feature_update
Update tip
2 parents 6496552 + a13b9be commit 3f99122

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -261,19 +261,21 @@ Want to center something else? Vertically, horizontally...anything, anytime, any
261261

262262
### Use `aspect-ratio` Instead of Height/Width
263263

264-
The `aspect-radio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift.
264+
The `aspect-radio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Use `object-fit` with it to prevent disrupting the layout if the height/width values of images changes.
265265

266266
```css
267267
img {
268268
aspect-ratio: 16 / 9; /* width / height */
269+
object-fit: cover;
269270
}
270271
```
271272

273+
272274
Learn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio).
273275

274276
#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/)
275277

276-
⚠️ **Note:** `aspect-ratio` isn't supported in IE11.
278+
⚠️ **Note:** `aspect-ratio` and `object-fit` aren't supported in IE11.
277279

278280
<sup>[back to table of contents](#table-of-contents)</sup>
279281

0 commit comments

Comments
 (0)