Images

[00:00:00]
>> Kevin Powell: All right, so we've been spending a lot of time talking about backgrounds and background images came up. With background images, there's, you know, it crops, it does weird things. Images themselves are generally more straightforward, but I do want to talk about them. We don't have to spend much time on them. They're actually a special type of element, which means they behave different from what most things would be.

[00:00:21]
They're called replaced elements, because we're replacing the content of the element with the content of the source that an image is pointing to. And it does mean that they behave in a bit of a strange way. I mentioned earlier, they're inline elements. They are inline, but they're also weird because you can apply sizes to them. So I'm going to look back here, if you remember, I didn't actually remove the image.

[00:00:45]
All I did was do a, I commented out just because I wanted to use this as an opportunity to talk about them a little bit. So you don't have to include it. We're going to leave it out of the final version, but I just think it's important that we do address this, where if I have this image that's in here. What can happen is images by default wanna be their natural size. So if you have a big image, it will be big, if you have a small image it will be small, that's just the size it is.

[00:01:10]
And unlike other elements that I said, the natural behavior of them is good, and we want to embrace it, where they'll get smaller and grow and do everything else and they're responsive. So if you have responsive issues, it's your fault. Images will cause responsive issues. So if this viewport gets narrower, my image will just spill out the side. Cause the image wants to be as big as the image is. In general, we don't want to make images bigger, the same way we saw with the background image, cos a bigger image loses quality, it gets blurry, it doesn't look good.

[00:01:44]
But when stuff like this happens, we want it to behave a lot like the other things we were doing were where they were allowed to shrink if the space wasn't there for it. And we can use the exact same type of constraint on images. So one of the most common lines of code you'll have in your CSS. Let's put it here with our button. Is to have an image. And there's two lines here. One is a max inline size or max width is the more common, 100%.

[00:02:16]
And this is the same idea of the constraint. We don't want it to get bigger, but we want to say if there's not enough room, it should be smaller, and the size of it should match the size it has available to it. So by saying 100%, don't get any bigger than whatever you're inside of, is essentially how that's looking at it. But there's a problem, we can't set sizes on inline elements. So we do have to also come in and say this is a display of block as well.

[00:02:44]
And now, if I say that's a display of block as well, you can see as this gets bigger and smaller, just full screen it to make it easier, as this runs out of room, it's allowed to shrink or get bigger. The downside of making it a display block is that you can't rely on that text alignment of center that we were relying on before, that is super handy when it works. So it's a take one or the other, approach a little bit there, but now we, if you need it to be centered, you could put the margins auto on the sides, and then it would center.

[00:03:14]
We're not going to be keeping this image in here, so I'm not going to worry about it, but I did really, I think it's a really important thing to address along the way since we're talking about layouts and we won't have a lot of images to be dealing with. So this line here, super common. I do also want to mention there is an alternative approach to this. Sadly this is, it was from Harry Roberts. I think the only place he's posted this publicly, I looked for a blog post on it, I couldn't find it.

[00:03:44]
It was on X, and there's a whole thread that explains it, but if you don't have an account on X, you can't see the thread, which is really annoying. But this is his reset for an image rather than what I was just looking at before, or we can put a max width, I said you can't because it's an inline element, but you can because it's a replaced element. They're weird. But he's doing it a little bit differently here with all those different points about what they're all doing.

[00:04:11]
Not going to stress about it. I use, I don't use this. I still use this version that we were just looking at, much simpler, so you can go with that without any problems. There are a couple of advantages of his. If you are curious, if you don't have an account, I did make a video where I actually broke his down because I thought it was super interesting. What he was including in there, so there, if in the course material, if you do want a little bit more information on that, you can either check out his post or check out my video where I break the whole thing down step-by-step to explain what the purpose of some of those declarations were because they look a little bit strange when you first see them.