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.
If your images are all different sizes, you will need to change 'background-size:cover' to 'background-size:contain' - this is what makes background images more versatile than standard <img> tags in situations that require a non-breakable grid.
- Demo using 'background-size:contain' where differently sized images are constrained to the grid
- Demo using <img> where differently sized images flow around neighbours
Compatibility
- IE9+ *
- Chrome
- Safari
- Firefox
- Opera
- Android
- iOS
* "background-size:cover;" isn't supported in IE7/8 so a fixed-size fallback is provided for those browsers.
Grid Image Calculator
This form calculates the required width CSS value of each image in a row, for this demo's fluid grid scaling.
Enter the desired number of images per row, the margin around images, then transfer the results to your CSS.
| images per row | margin (%) | |
| width: | % (per image) | |
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.