Expired Queues
Published since 2009 Core-CSS.net → CSSJunction.com → Expired Queues Web development
Retrospectpostscss

The most-read thing I ever wrote is a Stack Overflow answer

On a Saturday in October 2013 I answered a question on Stack Overflow about sizing an image against its parent's height. That question now has 478,000 views. Nothing I have published here, in sixteen years, comes anywhere near it.

The question was ordinary. Someone had a fixed-size box, images of assorted dimensions, and wanted them to fill the box without squashing. Today that is two lines of CSS. In 2013 it was this:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.img-wrap > img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

min-width and min-height at 100% mean the image is never smaller than the box on either axis, so there is no gap to fill. Whatever spills over gets cut off by overflow: hidden. Then you centre it: top: 50% and left: 50% push the image's top-left corner to the middle of the box, and translate(-50%, -50%) drags the image back by half of its own size. Percentages in translate resolve against the element itself, not the parent. That is the whole trick, and it is still the way you centre something whose dimensions you don't know.

I wrote about six hundred words explaining it, and signed off with "Apologies for taking too long to explain!"

Here is the same thing now:

.img-wrap {
  aspect-ratio: 4 / 3;
}

.img-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

No positioning, no overflow, no transform. object-fit: cover does exactly what the six lines did, and says so in its name.

It would be easy to file the old answer under embarrassing, but I don't. When I posted it, object-fit had not shipped in a single browser. Chrome picked it up in early 2014, Safari later that year, Firefox in 2015, Edge in 2017. Internet Explorer never did. For a good few years after 2013, the hack was not the clumsy option - it was the only one that worked everywhere.

The fiddle from the answer still loads, thirteen years on, under a username I stopped using a long time ago.

The answer has been edited once, in September 2017, four years after I posted it. Stack Overflow does not tell you who made an edit, only when, and other people can edit your posts there - so I will say only that the prose got tidied and the CSS did not. Whoever it was, me or a stranger, the advice came out unchanged. Which is roughly how old answers rot: nobody edits a thing that isn't broken, and being outclassed is not the same as being broken.

Sixty-four answers, three thousand points, and the one that reached people was six lines of CSS typed on a weekend.