CSS3 Grid Images - Fluid Scale, Responsive + Modal Pop-up
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'.
I combined the RWD Grid Image demo with my simple Responsive Modal Overlay/ Pop-up Image Viewer script, further to this Dynamic Drive forum thread. Click on any image below to open a bigger version in a modal overlay.
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.