Smart Ratio CSS Photo Grid
How do I make an smart ratio css photo grid?
This padding-top ratio grid supports. 1-up two up layouts without background size and automatically configures it's ratio and centers it vertically. Have a play.. What is a smart ratio css photo grid? How do you make a smart ratio css photo grid? This script and codes were developed by James Nowland on 31 October 2022, Monday.
Smart Ratio CSS Photo Grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smart Ratio CSS Photo Grid</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="photoGrid photoGrid-1"> <div class="responsive-container"> <img src="http://lorempixel.com/600/600/nature/1" /> </div> </div> <div class="photoGrid photoGrid-2"> <div class="responsive-container two-up"> <img src="http://lorempixel.com/600/600/nature/2" /> </div> <div class="responsive-container two-up"> <img src="http://lorempixel.com/600/600/nature/3" /> </div> </div>
</div>
<h3>No background size, no problems :).</h3><p>Using just ratios and no fixed sizes this padding-top responsive trick works just like background-size does except it's done via images and not backgrounds</p> <script src="js/index.js"></script>
</body>
</html>
Smart Ratio CSS Photo Grid - Script Codes CSS Codes
.responsive-container { position: relative; padding-top: 56.25%; overflow: hidden;
}
.responsive-container > img { position: absolute; top: 0; margin-top: -17.22656%; left: 0; max-width: 100%; height: auto;
}
.responsive-container.two-up { padding-top: 65.625%;
}
.responsive-container.two-up > img { margin-top: -6.76758%; top: 0;
}
.responsive-container.two-up:first-child { background: red;
}
.responsive-container.three-up { padding-top: 21.875%;
}
.responsive-container.three-up:first-child { background: red;
}
.container { max-width: 500px; margin: 0 auto 0; overflow: hidden;
}
.photoGrid { position: relative; float: left;
}
.photoGrid-1 { width: 70%; background: blue;
}
.photoGrid-2 { width: 30%;
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: sans-serif; color: #343434;
}
h3 { text-align: center;
}
p { max-width: 24em; text-align: center; margin: 1em auto;
}
Smart Ratio CSS Photo Grid - Script Codes JS Codes
// Responsive Photo Grid with diffent sizes- the second grid works out its ratio and centers also.
Developer | James Nowland |
Username | jnowland |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 3,200 Kb |
Views | 16,192 |
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 |
Login Form CSS only validation | 5,739 Kb |
SVG Modified with Query String | 1,663 Kb |
Pure CSS Spinner | 3,909 Kb |
Outer Gradient Circle Progress | 17,247 Kb |
Download Rebound | 10,865 Kb |
CSS Ribbon with inner border. | 166,994 Kb |
Responsive Typography for dummies. | 6,869 Kb |
Dribble Button CSS Rebound | 7,557 Kb |
CSS3 Stroke and Gradient Text | 2,577 Kb |
Ad Folding without regions | 3,938 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 |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
CSS Google Now | Jackmoran | 3,196 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Cake | Kennyname | 7,220 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!