preserveAspectRatio

[00:00:00]
>> Sarah Drasner: Preserve aspect ratio, you will probably almost never need this. [LAUGH] Like almost, almost never. But I cover it anyway because it's important that you know about it in case you do wanna use or in case you wanna do some advanced cropping techniques. But don't feel like you have to commit this to memory in the same way that you have to for the circles and recs, you probably should commit to memory, this, it's okay.

[00:00:24]
So the default which is preserved aspect ratio X mid Y mid meet is usually what you want in real life. That kind of uniformly scales, and it's likened often to background sized cover in CSS. So if you ever have an image that you make a hero image and you like always great all the time, that's the same kind of idea.

[00:00:47]
So, it takes three parameters, a line and meetOrSlice, so we've got x Min, Mid, Max, Min, Mid, Max, Meet, and Slice, or none. And don't worry if that doesn't make sense, I'm gonna show you visually what that means. Actually, let's show you visually what this means before we even do this part.

[00:01:03]
So Meet means that it's going to constrain within the viewBox. So nothing, no shapes are going to be cut off it's just going to constrain within the viewBox and it's going to go yMin, yMid, yMax, xMin, mid and max. So you can see if it's yMin and yMid, it kind of stays in the middle, right?

[00:01:28]
If we've got Slice, then that's kind of intuitively named actually. It's actually blowing up so big that it, the corners meet the edges of that frame. And it's going to cut things off so Min, Mid, Max, Min, Mid, Max. So if we go back here, Meet, the default, entire viewBox is visible within the viewport.

[00:01:51]
The viewBox is scaled up as much as possible meeting other criteria, and the viewBox is smaller than the viewport. Slice, the entire viewport is covered by the viewBox. The viewBox is scaled down as much as possible meeting other criteria, and the viewBox is greater that the viewport. None is actually my favorite because it takes all of the constraints out of that image.

[00:02:13]
And that might not be great for a face. If it's a face, it's not super great to have it just expand in every direction and be like [SOUND] and it would actually make that noise too. [LAUGH] And you can kinda see how that would, for a regular image, not be so great especially like icons and stuff.

[00:02:33]
But you don't necessarily have to use it for that, we could use it for things like layout. So I made this site with Valhead and for each of these sections I have this section between that's this triangle and you can see how it scales up and back down as I make it responsive.

[00:02:53]
So basically what's going on here, I come out of full page mode.
>> Sarah Drasner: So you see how this triangle goes like this, same with this. And it's just really part of the layout right? Really it's an SVG that where it has preserved aspect ratio none so it scales completely with the container, and has an imposed height so it always stays the same height.

[00:03:20]
But then the width just changes. And it goes to a pointier triangle. But if I wanted to make it like a smaller triangle I could have put in a media query that said like, make it smaller, or something like that. I will literally expand to whatever the container is.

[00:03:36]
And if you look at this, it's just the color. It's an SVG, that's the color of this section above it. preserveAspectRatio, None, and I just drew a path with drawing lines and things like that. And we're gonna talk about paths in a second. So you can do crazy things with your layout, and you're not beholden to sticking to just boring boxes everywhere.

[00:04:06]
So this is another kind of pen that shows, come on, Chrome. Wait, I've gotta come out of full screen. So if I take this, this is done with React and React Motion. You can see that these triangles in the background, they're really just for design purposes. They don't do anything exactly, but they're squishing back and forth and it makes the design a little less boxy and a little bit more dynamic.