 Welcome to the CSS podcast. This season, we're answering your most burning CSS questions. And one thing that we see in nearly every web experience at one point or another are images and other media. But sometimes that media doesn't always look right. It might be distorted or cut off at the edges. And you might be confused about why that's happening. Well, there are a few ways to add images to your websites, and so there are a few different reasons that you might be running into issues with them. So in this episode, we'll talk about foreground images, background images, SVG, and why those images might be distorted. Yeah, they all squished. And I'm like, why? We're here for you. Let's start with foreground images as you called them, which it makes sense you called them foreground images, but I don't know. I never thought of them that way. They're the opposite of background images. That's why I'm like, obviously, they're in the foreground. And these are the ones that are critically part of your content, right? If you search Google, they're going to show up. And you add them with an image tag, which can be within a figure or a picture element. And images have this weird term called a replaced element. And that means that the elements, contents, and size are defined by an external resource, unlike the image in this case, and not the content of the element itself. There's other replaced elements in the web, too. You could go check those out if you're interested in this concept. But because images are replaced elements, images will render on your page as their entrance excise by default. But you can style them a few different ways. You can set their height and width directly in the image tag as height and width attributes, which we highly recommend. You can set your height and width in CSS, or it could be a percent width of a parent. But what I often do, which you might do, too, is setting the image to be 100% of its parent width. And if the image is a portrait, its parent is landscape, you might see that it overflows the parent. So that might not be what you want. Now you might also want to set the height to 100%. So it's not just the width of 100%, but also the height of 100%. So it actually fully fits into its parent size, no matter what. But here is where that issue comes in. When you have an image and you set its width and height to 100%, so it takes the size of its parent, you're going to get some distortion. It's either going to shrink or stretch, and it might not be what you want. I can just imagine a box. Maybe you're packing and you're putting images into your suitcase and you're just like, fit in there. And the browser by default just goes, oh, it's easy. I'll just squish it this way and squish it that way. It fits right in. If only packing my luggage could be so simple. If only it was OK for the image to just look however it needed to. Yeah, it's no big deal. We'll just read the alt. You don't need to see anything. Well, here are some solutions, though, to this stretchy, squished, and maybe stressy image that needs to fit into a box. You can use object fit and object position properties to position the image inside of there. So object fit, you can set it to something like cover, which will spread and center the image. And you can use object position or reposition to somewhere else. Like if you want it to be the left aligned or right aligned, maybe you wanted to focus on some sort of content after it sort of did some cropping. Cover will often crop pieces of it unless it's maintained the aspect ratio. You've got object fit contain, where the parent box is the max size, either the width or height, and it'll shrink to fit. And a little FYI here, the default is fill, where it will stretch to fill the parent space. So object fit, the default is fill. This is often why you get a stretch and a value of none, which you can specify, cuts the image off. It basically does nothing, and that is not the default. You can also do something like max inline size of 100%. And this is really common these days as a reset or to normalize styles for your images, which is great for a couple of reasons. So the first is that the image won't ever be larger than the viewport or its container that you've set it to be a max inline size of. And it's also a max size. So it's not going to ruin the aspect ratio of the image, like setting the height and width of 100% can. It also pairs with block size auto, so the height resizes with any constrained width. So you can set max inline size 100% on your base style sheet or your resets to really normalize all of your image or media styles. Yeah, seen that one a bunch of times. It's always like the default, too. You're like, I'll just add an image in this quick little demo, and you're like, oh, the image is humongous. Stop that. Yeah, right. If you don't have any styling on the image by default, it's just going to take the size of the image is intrinsically. So it could be 3,000 pixels by 2,000 pixels, then making the rest of the page break. Because it's a foreground image. It's a foreground image. And OK, so speaking of foreground images and tricky, stretchy image scenarios, they can get even trickier when they're inside of a flex box or grid layout, where that replaced element concept and then the distributed space concepts, they start to compete. And they need additional styles so that they treat these images well. So here's a few different ways to get around that. One of them is you put align items on this container. This can be set on the container to replace the default value of stretch, and you can replace it with something like start or center. So that way it won't stretch the children. It will just use their intrinsic size. You can also, on the image itself, put align self, center or start. So that way, regardless of whatever the parent wants, this image can specify that itself should not stretch. You can also put flex shrink zero on something if it's flex container. And that's like saying, hey, flex, you can't squeeze me into this space anymore. I'm unsqueasable. My value is zero. False is the value. Can I be squeezed or not? And the last one, this is what I did for a long time, was just add a wrapper around the image. And sometimes that's even the picture element or a figure element. So not only does these kind of semantically enhance them or give you an opportunity to, they also disassociate you from being a direct child of that container, which means those stretchy style attributes coming from that container don't apply to you directly. They're going to be on your parent because I'm talking to an image. But yeah, that parent will get that stretch and you'll still be your intrinsic size inside of there. So a couple of tips. Yes. That's a good one. And I like that you mentioned figure or picture element for more semantic enhancing of your media styles. So with figure, you could have additional context in there, multiple images, big captions to caption that image set or individual images. So really good tip there too, whenever you're building interfaces. So those are foreground images or content images, the images that apply on your page and are part of the content flow. But there's also this capability of creating background images in CSS. So background images are applied using the background image property in CSS and not through your HTML like the foreground images that we just talked about and all the different foreground image elements that you can use. And because of this, you should generally only use background images for decorative content since you can't add alt tags, you can't add fig captions, and you can't give them content, meaningful content the same way they can do for foreground images. Right, they work in the same way that they're gonna take up the space that you give them. So if you put them on the background of a card, they'll consume the size of the card. If you put them on the body, they'll be the size of the body, which also means you can run into the same issues as foreground images with object placement. So except with background images, they slot into their parent as a background. So they're not gonna consume or provide space for the page, but they can't get cut off and they can be squeezed. Yeah, they're not gonna make the rest of your content disappear and go off screen unexpectedly because they're taking up the full area because they're backgrounds and they're not going to actually take up that size on the page. But another difference between foreground and background images is while you use object fit in the foreground, you use background size for backgrounds. And they have the same values, there's contain and there's cover where contain will by default repeat your background image. Unlike foreground images, it'll be repeat by default. So you have to set background repeat to no repeat to not have your background image repeating if you just wanna have a single image there. If you do wanna repeat, you can repeat it in a single direction, so X or Y or both. Or setting background repeat to round will actually stretch your image, kind of like setting the height with 100% does with a foreground image to fill the space with background size contain. So for foreground images, you use object position for background, it's background position. So just like you can position things with object position, you can do the same thing with center or top left or positioning things with background position with a specific percentage or pixel value. So all in all, to get a contained image in the center for a background, you need three properties. The first is background size contain, containing that background to its parent that you're applying it in. The second is background repeat, no repeat. So you don't want that background to be repeating in this case to have that perfectly centered background image. And then background position center to actually finally position it within its parent. So a couple of things that we need to do to get that contained image as a background. This is just like jokes sitting in there, like I repeat, no repeat. And then so what's the deal here? We have like object fit and then we have background fit. Background size. Oh, it's not background fit. It should have been background fit. They did the thing with position. There's just like background. I know. Object position, background position, object fit, background size. Well, background size was first. So they could have done object size. It was first. They could have done object size. I'm with you on that one. Wow, shame. I wonder if that's in the list of, you know, CSS saris. Errors. Or what was it? CSS mistakes. It's like list of CSS regrets. Yeah, mistakes. Sorry, this was fun too. We're sorry. CSS is sorry. OK, well, let's talk about images. Lobby for object size. We could do more repeat. Let's repeat the repeat to not repeat. All right, well, next we have SVG images and issues that might be happening with your SVGs, which I see these all times like a icon button. And you know someone use Flexbox on it because it'll be in a mobile view and all of a sudden the icon's all stretched and you're like, the developer didn't test mobile. Anyway, with SVG images, your image, it could be distorted. And it might be because of the view box. And it's most likely cut off because your image issues, it's been stretched or shrunk. And anyway, there's all sorts of things that could happen with your SVG. Yeah, so with SVG, the vector data might actually be there. But if it's positioned outside of the view box, you might not see it or at least a part of it. So it depends on how you built it, how you're placing it in your UI too. It happens a lot where I'm trying to get clever and customize an inline SVG or just customize my SVG. And I'm like, I'll just change this view box property or something. And so the view box shrinks. And I'm like, yeah, and then all the art is still outside of it. That can be really stinky. One solution, though, you have here, which is nice, is use overflow visible on the SVG. You're like, hi, keep showing those parts, though. Would you? That'd be nice. You can also just adjust the view box like I was saying, but do it in a better way. So instead of clipping content, you can fix it so that it's not clipping anything. And you can do that with some scaling. So the view box has some properties it can take. It has start x. So does the x-axis first, then it does the y-axis, and then you can specify height and widths. When you see those four values in the view box, it's x, y, width, and then height. Yeah, and that's also something to look out for when you are using SVG for a background image too. So you can use SVG in background images. You can inline them, and then you get the same concerns possibly for your SVG images. So be sure to check the size. If it's in Flexbox, then roll back a couple of minutes to the start of this podcast when you talk about image placing that way. And if it's getting cut off, then try some of the other solutions, adjusting the view box, or using overflow visible. So different types of images require different solutions. Yeah, careful for that double position where you've got the position from CSS and then position in the view box or something like that. And maybe that could be really tricky to debug. You're like, where is it? It's gone. Got to figure out which one's going to position it. All right, and then we have a section here called general image tips. I salute general image. General image. How I met your mother. It's a good show. It follows me everywhere I go. All right, so we'll start out with one thing you can do for either foreground or background images is to set an aspect ratio, to maintain a specific ratio on the element with that property called CSS aspect ratio. It's also great to reduce page reflow, like CLS, and improve your core vital scores because the image can hold its space on the initial layout and not wait later to find out what size it needs to be. And that aspect ratio helps that scenario. Yes. And another thing that you can do to, essentially for the same reason, is to explicitly set width and height with HTML of that image. So you could set width and height directly as an attribute. You can do this with the foreground images. For background images, you'll have to use aspect ratio on the element that you want to apply the background within if you want it to take up 100% of its size, to have it be the exact aspect ratio, take up that space. But for foreground images that you're loading in, you could have width and height set directly as attributes. I feel like at first it feels like I had anxiety around setting width and height on images because I was like, well, what if my CSS needs to resize them to something else? And so just so you all know, these height and width attributes on the image are pretty much the starting place and they're the weakest of all of them. And so your CSS can still come in and override it. You could have 3,000 pixels width and 1,000 pixels tall, which would be like a three by one image in its ratio so that the browser will see that those two height and widths determine an aspect ratio. But your CSS can come in and be like, now your max width is 300 pixels. So it's always good to have these attributes on there for many, many reasons. But that is kind of like, I always thought that was confusing. I was like, if I put these in there, what happens to that? Anyway, so CSS will win, which is kind of nice. You can use source set and sizes attributes in conjunction with width and height attributes. And this has additional perfect advantages of allowing you to serve different sized images to different devices. Big old screen, get a big old image, little screen, little or image. And you can get that with the source set and sizes attributes. So lots of tools there for you to create responsive images, the different image sizes, improve the performance of your images, make sure that those images look right. But DevTools also has some great image tools in Chrome which show you the rendered size, the rendered aspect ratio, which can help you determine the aspect ratio values that you want to use to display that media. It shows you the file size, the current source, and it can help you make decisions about image optimization and also sizing, aspect ratios, all those things. So definitely check out DevTools for images, what you do is essentially just hover over the image and you get all the information in a nice neat box overlay. Yeah, a little image tool tip, great tip there. And the tip here is be prepared to write block size or height depending on what you're writing. Auto, so specifying an auto value for these is nice on any images that you've given a responsive width to. So like half of the image stretching problems are from setting a width or height on an image and not complimenting it with the other side. And the other half are coming from layouts. So sometimes it's a layout stretching its width and if it doesn't have height auto, it's not gonna snap its height to kind of match its aspect ratio. So be prepared to write height auto or block size auto. Yeah, good call. And our last little image tip is to test on mobile layouts because often the issue is not actually large viewport sizes but image issues and layout issues because of images start to peek out in the constrained layout scenarios of smaller viewports. And this happens with icons, this happens with overflowed areas. Avatar images. Yes, avatars, even like hero images, it's more than likely on a mobile layout or a smaller viewport than a larger viewport. So be sure you're testing and be sure you're testing cross browser. SVG is a big one that has cross browser compatibility differences still. And I run into this with SVG more than any other image type in terms of browser compatibility. So be sure to do that. All right, well, thanks for joining us so that we could de-distort your image troubles. If you have any CSS questions, we would love to answer them on the show. You can tweet at us with the hashtag CSS podcast. I'm at Yuna on X. Oh man, that sounds really catchy. Actually, it's a super catchy mod. I'm also on X space site. It's still called tweeting. It's still, all right. We're still tweeting on this new place called whatever, and I'm Argyling there at Argyling. And your question, shoot it to us. It can help a lot of people, really. And if you like the show, please give us a review on whatever podcast after you're using or share this podcast with a friend, a mentee, another developer on your team. Those reviews help other people discover our show. And that means that we have more time to make shows and deliver better content for you. Yeah, all right, thanks y'all. Look forward to your questions.