Scaling Images to Fit with CSS
6 March 2023, late morning
In the past when I would post a photograph on this blog I would resize it to 423px, so it would fit neatly in the enclosing box of a post. This is annoying and fussy work just to add an image to a post, and I don’t recall if the reason I was doing it at the time was to save bytes when downloading these pages or what. I want to be a bit more future proof going forward in case I end up redoing the layout here, making the main column wider for example. The image in the post about Craig Mod is 1024px. It’s scaled with CSS, or it should be. This seemed both fussier than it should be, but also seemingly so easy I should have done it from the start. I’ve set width:100% and height:auto to override the values Textpattern sets. This should scale the width to match the containing box, and the height to scale to keep the aspect ration. I’ve also set max-width: 100% so the image never has to scale up past its actual size. This later step probably not needed based on how the blog is currently designed: to fit on old 640×480 screens. Please let me know if i’ve broken the layout here!