---
title: The most-read thing I ever wrote is a Stack Overflow answer
description: >-
  A six-line CSS answer I posted on a Saturday in 2013 has 478,000 views. Nothing on this blog comes
  close.
url: https://expiredqueues.com/most-read-thing-i-wrote/
date: '2026-08-24T09:00:00.000Z'
image: https://expiredqueues.com/images/og/most-read-thing-i-wrote-bf3a8871.jpg
---

Retrospect posts css

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

24 August 2026 By Adrian 2 min read

[On a Saturday in October 2013](https://expiredqueues.com/six-weeks-in-2013/) I answered [a question on Stack Overflow](https://stackoverflow.com/a/19193308) 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:

```css
.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:

```css
.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](http://jsfiddle.net/shekhardesigner/aYrhG/) still loads, thirteen years on, under a username I stopped using a long time ago.

[The answer has been edited once, in September 2017](https://expiredqueues.com/answers-i-went-back-to-fix/), 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](https://expiredqueues.com/answers-need-expiry-dates/): 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.

[Previously Every answer needs an expiry date](https://expiredqueues.com/answers-need-expiry-dates/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "The most-read thing I ever wrote is a Stack Overflow answer",
  "datePublished": "2026-08-24T09:00:00.000Z",
  "dateModified": "2026-08-24T09:00:00.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/most-read-thing-i-wrote/",
  "keywords": "posts, css, stack-overflow, tips-tricks",
  "articleSection": "Retrospect"
}
```