Sign in

CSS Gets a Bad Rap

I may just feel that way because I don’t know enough but I do know that it has always seemed to get me out of a bind. However the industry feels about it, it still never ceases to amaze me just how powerful a tool CSS can be. I continue finding new ways to solve problems using CSS, which prompted this rant. I may not convince anyone CSS is not the dark-side, but hopefully someone can use what I’ve learned to solve a problem of their own.

When I was first starting out, someone showed me how to set a background image using CSS and, at the time, that just blew my mind. As I kept messing around with CSS and flexbox, I started to get better at it and began to like it even more (probably because it actually made sense). At the same time, everyone I hear talk about CSS hates it and I (still) don’t know why. Last night I ran into an issue that had me perplexed at first…but then CSS showed me the light.

Most people know about the simple CSS properties like background-image, background-size, and other various properties but sometimes you really have to dig to find the solution you are searching for.

All of the images would warp and stretch

The problem I was having was on a pretty basic website I am building for my brother. The image carousel I built receives the images via the HTML file, therefore, I could not add a background-size: contain property on each photo in order to avoid image pixilation and the carousel jumping to and from various sizes. I realized there were probably many solutions to this problem, one of which was using JavaScript. However, I knew there had to be a more economical way of solving this than writing a function for it.

Thank God for the dev bible aka Google.

Whether it was out of pure laziness or simple curiosity, I just jumped right into some google searches. After coming up with a few failed attempts of setting max-width: 100% and margin: auto to a few different classes, I stood up, took a few breaths, and got back to the searches. As it goes, it took a few more minutes of browsing before I landed on W3 schools, who are known to drop some pearls of wisdom from time to time.

Shoutout to the wonderful folks at W3 schools because this is when my night peaked. Once I saw the words object-fit: contain I knew immediately this was the moment I had been waiting for. I knew it was going to work even before I plugged the code into my image class. Alas, I am able to plug in a very likely solution. The moment I realized that it actually worked, I had a rush of euphoria and felt the need to tell everyone about this CSS property that made my night so much better in the hopes I could do the same for someone else.

https://greg-lynn.github.io/WhittierWoodworks/

If you have made is this far, thanks for reading my words. You can connect with me on twitter @GregDev92. On Github at https://github.com/greg-lynn. You can also checkout some of my work here: https://greg-lynn.github.io/PortfolioWebPage/

Front End Software Engineer meandering through the world of tech