CSS3 Grid Images - Fluid Scale, Responsive

The images in this demo fluidly scale down in size as the browser width decreases. They do not break out of their grid.

Images of different sizes are constrained to the grid with "background-size:contain;".

Standard <img> tags are not constrained to the grid which allows them to flow around differently sized neighbours. Here's an <img> tag demo to illustrate that behaviour.


More demos and snippets

Did you find this useful? There are more demos and code snippets this way.