Object Fit

Transcript

I'm going to show you one final trick to make your images look great. You know how to change the width of images. When you change only the width, the browser will figure out the height for you. But what if you want to set the height to?

Well, there's a CSS property called you guessed it height. You have to be careful when changing the width and height of images. resizing, an image can make it look blurry or cramped. But there's another property you can use to fix that called object fit cover. Object fit cover tells the browser to resize an image by cutting out parts of the image instead of stretching or squishing it. Object fit cover basically lets you give an image any height and width you want without stretching it.

Let me show you how object fit works. Using these images at the bottom of my homepage. You might have noticed they're different heights. The browser figured out their heights for me, but I want them to be the same size. In my home.CSS file. I'll give them a height of 150 pixels. Now the same size, but some of them are stretched. I can fix that using object fit and the value cover. This lets them all appear to be the same size, even though they started as different sizes. Now that we're all done with this course, let's reflect on what we've learned.

We started with an idea. We did some investigating and found out what we like about other websites. Then we mastered hot glue and turned our mock ups into full blown websites. Think about everything you did in. I can't wait to see what you come up with in the next course.