Author: Tim Vam Damme
Let's look at a method for ultra-lightweight, it can create horizontal brick effect for a group photograph of any size. The throw any photo above, they will be seamlessly aligned edge to edge.
The solution is not only lightweight, but also very simple. We will use the unordered list of images and only 17 lines of CSS code, which focuses on essentials is flexbox and object-fit.
#why?
I have two Hobbies: life with photographs, as well as to find new and interesting combinations of CSS properties.
A few weeks ago, I attended XOXO (Note: XOXO is an experimental festival for independent artists online live and work in) and shoot a lot of photos, and then I was reduced to 39 photos. In order to have my own content, it took me two years to set up a simple photo blog, but failed to achieve the layout I wanted: a simple brick layout, while filling line which photos to respect its wide a high percentage (in the iOS, Google Photos, Flickr consider using Photos.app).
I did some research to see if there is any lightweight, non-JavaScript option, but can not find anything suitable for my needs. Face of some flight delays, I began to tinker with some code, limit yourself to simplify things as much as possible (because that is my definition of fun).
# Basic mark
Because I basically create a picture in the list, so I chose the unordered list:
<ul>
<li>
<img>
</li>
<!-- ... -->
<li>
<img>
</li>
</ul>
# All hail the same as the elastic box
Followed by a series of light bulb moment:
- Flexbox very suitable for determining cell by cell contents according to the width of the line is filled.
- This means that all pictures (landscape or portrait) need to have a uniform height.
- Can I use object-fit: cover; ensure that the image is full of cells.
In theory, this sounds like a tricky plan, which gave me the results of 90% satisfaction.
ul {
display: flex;
flex-wrap: wrap;
}
li {
height: 40vh;
flex-grow: 1;
}
img {
max-height: 100%;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
}
Note: 40vh seems to be the best initial way desktop browser to a reasonable size display two full-line photos, and show more below. This also allows more photos of each line, thus greatly improving the aspect ratio.
# The last line elastic scaling
The only problem I encountered was flexbox really want to fill all the rows, and its last line of the picture aspect ratio did some stupid things. It may be that the layout of my least favorite part, but I have to add an empty <li> element at the end of the list.
<ul>
<li>
<img>
</li>
<!-- ... -->
<li>
<img>
</li>
<li></li>
</ul>
This combination of CSS:
li:last-child {
flex-grow: 10;
}
Note: Use here "10" is no scientific basis. In all my test summary, which provides the best results. (Note: The author mean it is a better test results in figures is a result of constantly trying to value adjustments.)
#Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width' />
<title></title>
<style>
ul {
display: flex;
flex-wrap: wrap;
}
li {
height: 40vh;
flex-grow: 1;
list-style: none;
}
li:last-child {
flex-grow: 10;
}
img {
max-height: 100%;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
}
@media (max-aspect-ratio: 1/1) {
li {
height: 30vh;
}
}
@media (max-height: 480px) {
li {
height: 80vh;
}
}
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
ul {
flex-direction: row;
}
li {
height: auto;
width: 100%;
}
img {
width: 100%;
max-height: 75vh;
min-width: 0;
}
}
</style>
</head>
<body>
<ul>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg"
alt="A Toyota Previa covered in graffiti" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg"
alt="Interesting living room light through a window" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg"
alt="Sara on a red bike" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg"
alt="XOXO venue in between talks" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg"
alt="Trees lit by green light during dusk" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg"
alt="Portrait of Justin Pervorse" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg"
alt="Empty bike racks outside a hotel" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg"
alt="Heavy rain on an intersection" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg"
alt="Payam Rajabi eating peanut chicken" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg"
alt="Portland skyline sunset" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg"
alt="Interior at Nong's" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05501_yirmq8.jpg"
alt="A kimchi hotdog on a plate" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05624_f5b2ud.jpg"
alt="Restaurant window with graffiti saying 'water'" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05623_dcpfva.jpg"
alt="Portrait of Jeremy Tanner" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05515_d2gzut.jpg"
alt="Jordan, Sarah and Sara on red bikes, waiting" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05581_ceocwv.jpg"
alt="Barista wearing a hoodie saying 'Coffee Should Be Dope.'" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05517_ni2k0p.jpg"
alt="Payam crossing the street on a bike" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05620_qfwycq.jpg"
alt="Lit trees reflected in a puddle" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05462_b33uvp.jpg"
alt="Moody chair in my hotel room" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05489_mqzktl.jpg"
alt="Tom and Jenn wearing sunglasses" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05476_dlkjza.jpg"
alt="Jordan and Sarah in front of a restaurant window" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05497_abbd3c.jpg"
alt="Sarah reading the Double Dragon drink menu" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05487_fcdv7t.jpg"
alt="Beer brewing equipment" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05493_q6njbk.jpg"
alt="2 cocktails in the making" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05446_xj60ff.jpg"
alt="Beverage fridge at Nong's" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05559_hu49zx.jpg"
alt="Wood structure reflections" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05482_dtrj02.jpg"
alt="Colorful garden equipment in a shop window" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05565_dx5rp6.jpg"
alt="Sarah in front of a wooden wall" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05613_o9af2z.jpg"
alt="A neon banana" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05469_fdxdzx.jpg"
alt="Matt Sacks smiling while we're waiting for food" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05558_yq2tnz.jpg"
alt="A fixed-gear bike under some bright lights" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05483_dyiuya.jpg"
alt="Panic's PlayDate being held by a tester" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05468_xzbtcd.jpg"
alt="Window reflection of me and Payam" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05457_nloycw.jpg"
alt="Upside down shopping carts" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05522_mekpec.jpg"
alt="Payam riding a bike with no hands" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05611_lbwtmk.jpg"
alt="A kid's pillow left on the bench of a bus stop" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05572_xfvij7.jpg"
alt="My reflection in the mirror" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05481_gnljae.jpg"
alt="Jordan holding an iced coffee against his head to cool down" loading="lazy">
</li>
<li>
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05480_zkw8sm.jpg"
alt="Jordan and Sarah looking at the menu in a coffee shop" loading="lazy">
</li>
<!-- Adding an empty <li> here so the final photo doesn't stretch like crazy. Try removing it and see what happens! -->
<li></li>
</ul>
</body>
</html>
# Viewport optimization
When operating on a different viewport orientation, some considerations to keep in mind.
Longitudinally aligned
If the height is greater than the width of the viewport, this method will limit the number of lines per picture, thereby cluttering their aspect ratio. To solve this problem, you can use the following simple media queries to reduce the height of the photo line:
@media (max-aspect-ratio: 1/1) {
li {
height: 30vh;
}
}
Short Screen
To help small and beautiful landscape format equipment, the need to increase the height of the picture helps to make them look as large as possible:
@media (max-height: 480px) {
li {
height: 80vh;
}
}
+ Longitudinally aligned smaller screen
Most of the phone's wide enough to allow flexbox work under circumstances not reduce the size of the photo, so I chose not to try to accommodate multiple photos of each row. Nevertheless, worth setting the maximum height here, so you can at least alert list of the next photo.
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
ul {
flex-direction: row;
}
li {
height: auto;
width: 100%;
}
img {
width: 100%;
max-height: 75vh;
min-width: 0;
}
}
# Other flexible adjustment method!
This approach does not fully respect the aspect ratio of the photo (but very close), and occasionally can lead to some strange results, but I absolutely love it all the simplicity and flexibility. Do you represent the gallery to scroll horizontally instead of vertically scrolling it? You can make some adjustments to do this. There are 1000 photos in the gallery or only one? Everything looks good. I do not know the aspect ratio? Flexbox is your best friend. If you do not demonstrate, let's look at the demo, let me know what you think!
# Windfall
Depending on the size of these photos, this page may soon grow to several megabytes. I'm working on a blog, I added a loading = "lazy" to help solve this problem. The case with this attribute on the image, it is only when the load close photo photo while scrolling. Currently, Chrome only supports this feature, but you can use more technology they supported.
Original link:
https://css-tricks.com/adaptive-photo-layout-with-flexbox/