CSS3 Diamond Grid Images (vertical) - 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 are vertical inside of a rotated diamond "mask".
Compatibility
- IE9+ *
- Chrome
- Safari
- Firefox
- Opera
- Android
- iOS
* Images are not rotated in IE7/8 and "background-size:cover;" isn't supported so the images display at their native size regardless of the size of the div they're in. Fixed-size fallbacks are provided for IE7/8.
Related
- CSS3 Diamond Grid Images - Constant Size, Overflow
- CSS3 Diamond Grid Images - Fluid Scale, Responsive
- CSS3 Diamond Grid Images (vertical) - Constant Size, Overflow
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.