Responsive Image Grid using SVG wrappers
How do I make an responsive image grid using svg wrappers?
The images center horizontally & vertically within the SVG viewbox. Any image aspect ratio is supported. Odd images at the end are horizontally centered if you want them to be. Last image is included as a data URI to show that's possible also. Best tested full screen. . What is a responsive image grid using svg wrappers? How do you make a responsive image grid using svg wrappers? This script and codes were developed by Noah Blon on 24 June 2022, Friday.
Responsive Image Grid using SVG wrappers - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Image Grid using SVG wrappers</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" > <image width="100%" height="100%" xlink:href="http://placehold.it/300x300" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/300x150" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/150x300" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/1000x1000" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/300x1000" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/1000x300" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/150x1000" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/1000x150" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/300x300" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/300x300" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/300x300" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="http://placehold.it/300x300" />
</svg>
<svg> <image width="100%" height="100%" xlink:href="data:image/gif;base64,R0lGODdhLAEsAeMAAMzMzJaWlsXFxaqqqpycnKOjo76+vre3t7GxsQAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAALAEsAQAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/AAMKHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8eP/iBDihxJsqTJkyhTqlzJsqXLlzB1CRhAIACBAgY0zKxJYIAAnTRt+ryx0yZOoDyHZija82ewAwGiSg2AAIOBmlMJ5LxwdarNrTOgeqVqFatUrWW9ov1lYKzUAxYEmM16Qa5bAjTaug0At4LdsXjjzj0LzCwCAWKjOp2AQKrPAVKrVmgc9XHkGYYRT10sgXIAy1ElU/AMmmwvvaYBeO47gbAEsxZcA4AdA7Xo1RVk06agW6ovAY0DSxDgmIJtxlLBAjjeOXkM4DYpEK9s/HLzqMqZq3b+izMAqQVGc19u/XoAsNqf544aHjn2Cek9oy8vbPpnCgV882aPX39r/hmY/tUeAPlFJdwH9g3QX1TrBTAggf5JAF4xuE2A1YGzGUjBhRVwmIFXP9nHYAgVvqbhhieaGB2KKwIjgACoPZhhiyoe6KGFKV7gVVWejdjBizF2mOOMNg554y9qeTfhggHs52AFBTa51F94mfXiB0k2KGOUTm4ZoS9eKSchgBNw+d+TTHKwGn0dhBkbmRKYOSaaZX7Zy1iszemlj9/BCSGfAaolAp5aQhnhknUCypaVXRrKJ6Jx2nlBYlHlCUJXijWa5pl7SjlMYqIRKSSNR4ragVkYhgAqixgeWWqpwchmKo6kGjlkBlHKOGiOr/JqK43CyPmnp3puymkHlPJlgrDC/vZJ57CF9gKcpcJ6tph9oVo7AbanCvojAtRGqO1w9I0LALe8iNVqjqixJl91lbp3HgeJ1Uvvrwe2K292b+3by6oSpOescLudSbCkFmAVXoGpWgAweaE1eLCivSmaS2aYBuAdadBFPJljHaeGQchwgepdwpHByKh4lYUcqnk+efayLslONfNfWfo1mIEnN9jiYBrUzOa5O9t0Ms5Z9ZyL0Apy5ZaY8D3Ngc3yWkwB01ZJ7fRYUPNSlIOW+hVUU0gJpbTP19K1wdcFhC3d2EqNDPfZMdVt991456333nz37fffgAcu+OCEF2744YgnrvjijDfu+OOQRy755JRXbvnlaZhnrvnmnHfu+eeghy766KSXbvrpqKeu+uqst+7667DHLvvstNdu++2456777rz37vvvwAcv/PDEF2/88cgnr/zyzDfv/PPQRy/99NRXb/312Gev/fbcd+/99+CHL/745Jdv/vnopz9MBAA7" />
</svg>
</div>
<div class="meta"> <span>Responsive Image Grid using SVG Wrappers</span><br/>
</div> <script src="js/index.js"></script>
</body>
</html>
Responsive Image Grid using SVG wrappers - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { width: 100%; height: 100%; background: url(http://subtlepatterns.com/patterns/grey.png);
}
.wrap{ background: hsla(60, 70%, 40%, .1); /*Centers photos */ text-align: center; /*Kills inline-block white-space: http://codepen.io/chriscoyier/pen/hmlqF*/ font-size: 0px;
}
svg{ display: inline-block; padding: 1%; width: 100%; /* Add a border to see the svg viewbox */ /*border: 1px dotted black;*/
}
/*Media Queries - Width*/
@media all and (min-width: 27em) { svg{ width: 50%; }
}
@media all and (min-width: 40em) { svg{ width: 33.33%; }
}
@media all and (min-width: 60em) { svg { width: 25%; }
}
/*Media Queries - Height*/
@media all and (min-height: 40em) { svg { height: 50%; }
}
@media all and (min-height: 65em) { svg { height: 25% }
}
/* title box */
.meta{ width: 150px; font-family: Helvetica, Arial, sans-serif; background: hsla(0,0%,0%, .5); position: fixed; top: 5px; right: 5px; color: white; padding: 5px; text-align: center; font-size:.8em;
}
.meta a{ color: lightBlue;
}
Responsive Image Grid using SVG wrappers - Script Codes JS Codes
/*
Responsive Image Grid using SVG wrappers
Full Screen: http://codepen.io/noahblon/full/stnjd
The image centers horizontally & vertically within the SVG viewbox. Any image aspect ratio is supported. Vertical media queries too. Odd images at the end will center horizontally. Last image is included as a data URI to show that's possible too. Best tested full screen: http://codepen.io/noahblon/full/stnjd
*/
Developer | Noah Blon |
Username | noahblon |
Uploaded | June 24, 2022 |
Rating | 4 |
Size | 3,859 Kb |
Views | 72,864 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Colored SVG background-image - Mask Method | 2,328 Kb |
CSS Jellyfish | 5,609 Kb |
Juggle | 3,302 Kb |
Planet | 3,572 Kb |
Cross-Browser Range Input With Solid Lower Fill | 1,912 Kb |
Colored SVG background-image - Filter Method | 2,392 Kb |
SVG Christmas Light Icon Animated with CSS | 2,224 Kb |
3D CSS Text with Perspective | 4,044 Kb |
9 Pens | 3,350 Kb |
Sass-managed SVG Background-Image icons | 3,926 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Count up | Alanshortis | 2,391 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Loading animation | Codeams | 2,408 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
Layout 11 | Altynai | 1,690 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!