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.