Sizing down the 2x image using CSS

Go over to the browser and refresh it. Now, when you look at this image of Jaws, you really wouldn't see any noticeable difference:

However, a quick inspection shows that a @2x image is being served, but it's being constrained to a size of 200 x 200, so you can see that the original image is 400 x 400, but it's showing as 200 x 200:

Because of our foundation of responsive design, the immediate containing element .figure already has a width set of 23.958333333333 percent (as shown in the following code), which ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.