Order Summary Component

Utterly obsessed with pseudos. This image really shouldn't have been a pseudo, it was prominent and important enough to deserve its own <img>. However it made an interesting challenge.

If you place a content:url(image-path) then it takes a default size of the image and you appear to have no influence upon it (it was too big). So the next best alternative is the background-image, but then with no content you end up with a empty element. You can set the width & height manually, and that would work here, but as a universal solution it is poor in that the card could never scale.

After much trial and error it transpired the trick was to set the width at 100% (+ padding losses in this instance), and then set an aspect ratio to whatever the image height and width is. And thus the card can be resized at will, and the image will follow. A very pleasing solution.