A hero image needs a square crop on phones and a wide crop on desktops. Which markup expr…

A hero image needs a square crop on phones and a wide crop on desktops. Which markup expresses that art-direction requirement?

1. A `<picture>` element with media-conditioned `<source>` elements and an `<img>` fallback
2. One oversized `<img>` hidden with `overflow: hidden` at every width
3. A background image whose file name is changed by JavaScript after every resize event