From a13b9be66489cc8351587009735b2e97aa4d219a Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 4 Jan 2024 09:04:11 -0500 Subject: [PATCH] Update tip --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7e3a9b9f..bf5022bb 100644 --- a/README.md +++ b/README.md @@ -261,19 +261,21 @@ Want to center something else? Vertically, horizontally...anything, anytime, any ### Use `aspect-ratio` Instead of Height/Width -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. +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. ```css img { aspect-ratio: 16 / 9; /* width / height */ + object-fit: cover; } ``` + Learn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio). #### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) -⚠️ **Note:** `aspect-ratio` isn't supported in IE11. +⚠️ **Note:** `aspect-ratio` and `object-fit` aren't supported in IE11. [back to table of contents](#table-of-contents)