title: Image scaling with CSS
body: <p>I don't actually need it now, but just out of curiosity...</p>
  
  <p>Suppose we have a <em>fluid</em> website layout that works perfectly well on 1920px displays and on small smartphones. Now let's say we have images there and obviously (obviously?) we want to scale them. We've uploaded 2560px images on a server (because who cares about bandwidth nowadays) and set <code>width: 100%</code> property to the <code>img</code> tag.</p>
  
  <p>So we have two users: a programmer with a 1920px display, let's call him Jo, and a female student with a smartphone, let's call her Nancy (because everything is better with Nancy, right?).</p>
  
  <p>Jo and Nancy are happy because our plan with images scaling using <code>width: 100%</code> works, but what if we decided to show small images too, something like 400px width? Nancy won't notice anything, but for Jo it would be a disaster.</p>
  
  <p>So the question is: can we make Jo and Nancy happy without using JavaScript?</p>