When creating an image gallery with Instagram thumbnails, I encountered a challenge - ensuring the images fill the width without distorting them. To achieve this, I made sure each thumbnail was smaller or equal to the specified size and collectively spanned 100% of the container's width.
If you opt for a CSS preprocessor, achieving this effect is quite simple. However, without one, it would require more effort on your part.
For a practical demonstration, check out this CodePen example, which includes a link to another demo.
The key element in this setup is the Stylus CSS code snippet:
floaterSize = 300px
.floater
max-width floaterSize
for num in (1..10)
@media screen and (min-width: floaterSize*num)
.floater
width unit(100/(num+1), '%')
This Stylus code calculates the optimal width for elements within the set max-width limit, allowing for a fluid layout where each element fits within the prescribed bounds (floaterSize).
Here are snippets of the initial few generated media queries:
@media screen and (min-width: 300px) {
.floater {
width: 50%;
}
}
@media screen and (min-width: 600px) {
.floater {
width: 33.333333333333336%;
}
}
@media screen and (min-width: 900px) {
.floater {
width: 25%;
}
}
Employing a mobile-first strategy, the layout adjusts dynamically based on screen size - accommodating more blocks as the screen gets wider, up to a defined point. The provided Stylus script generates up to 10 media queries, ending at
@media screen and (min-width: 3000px)
.
Explore the complete CSS output below:
@media screen and (min-width: 300px) {
.floater {
width: 50%;
}
}
@media screen and (min-width: 600px) {
.floater {
width: 33.333333333333336%;
}
}
@media screen and (min-width: 900px) {
.floater {
width: 25%;
}
}
@media screen and (min-width: 1200px) {
.floater {
width: 20%;
}
}
@media screen and (min-width: 1500px) {
.floater {
width: 16.666666666666668%;
}
}
@media screen and (min-width: 1800px) {
.floater {
width: 14.285714285714286%;
}
}
@media screen and (min-width: 2100px) {
.floater {
width: 12.5%;
}
}
@media screen and (min-width: 2400px) {
.floater {
width: 11.11111111111111%;
}
}
@media screen and (min-width: 2700px) {
.floater {
width: 10%;
}
}
@media screen and (min-width: 3000px) {
.floater {
width: 9.090909090909092%;
}
}