是否可以在纯CSS中实现类似Flickr的对齐画廊? [英] Is it possible to implement a Flickr-like justified gallery in pure CSS?
问题描述
我一直在使用 miromannino.github.io 作为一些画廊的布局页,最近我一直在尝试找出是否有可能在原始CSS中执行此操作,可能是通过flexbox.
I've been using miromannino.github.io as gallery layout for a few pages and recently I've been trying to figure out if it's possible to do this in raw CSS, potentially with flexbox.
问题在于水平和垂直图片的变化,并且它们应始终填充容器宽度的100%.我最接近的是:
The problem is in the varying horizontal and vertical pictures and that they should always fill 100% of the container width. The closest I got was:
.jgal {
max-width: 90vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0 auto;
align-items: flex-start;
}
.jgalimg {
display: block;
align-self: flex-start;
max-height: 40vh;
max-width: 100vw;
width: auto;
height: auto;
}
在这样的布局上:
<div class="jgal">
<a class="jgallink" href="url-to-img.jpg">
<img class="jgalimg hor" src="url-to-thumb.jpg" width="640" height="480" />
</a>
<a class="jgallink" href="url-to-img-2.jpg">
<img class="jgalimg ver" src="url-to-thumb-2.jpg" width="480" height="640" />
</a>
[ ... ]
</div>
我有尺寸和方向作为上课.我尝试使用
I have the sizes and the orientation as class. I've tried using
align-content: stretch;
align-items: stretch;
但是将图像尺寸与a标签对齐会变得很棘手.
but then aligning the image size to the a tag becomes tricky.
那么,有什么想法吗?:)
So, any ideas? :)
推荐答案
尽管这个问题已有一年多的历史了,但我最近试图解决同样的问题,并提出了以下完全响应CSS的Flickr样的合理画廊解决方案:
Although the question is more than a year old, I was trying to work out the same thing recently and I came up with the following fully responsive CSS-only Flickr-like justified gallery solution:
.jg {
display: flex;
flex-wrap: wrap;
}
.jg > a, .jg::after {
--ratio: calc(var(--w) / var(--h));
--row-height: 9rem;
flex-basis: calc(var(--ratio) * var(--row-height));
}
.jg > a {
margin: 0.25rem;
flex-grow: calc(var(--ratio) * 100);
}
.jg::after {
--w: 2;
--h: 1;
content: '';
flex-grow: 1000000;
}
.jg > a > img {
display: block;
width: 100%;
}
<div class="jg">
<a href="#" style="--w: 200; --h: 300">
<img src="http://via.placeholder.com/200x300">
</a>
<a href="#" style="--w: 300; --h: 200">
<img src="http://via.placeholder.com/300x200">
</a>
<a href="#" style="--w: 500; --h: 400">
<img src="http://via.placeholder.com/500x400">
</a>
<a href="#" style="--w: 300; --h: 300">
<img src="http://via.placeholder.com/300x300">
</a>
<a href="#" style="--w: 300; --h: 400">
<img src="http://via.placeholder.com/300x400">
</a>
<a href="#" style="--w: 400; --h: 300">
<img src="http://via.placeholder.com/400x300">
</a>
<a href="#" style="--w: 200; --h: 300">
<img src="http://via.placeholder.com/200x300">
</a>
<a href="#" style="--w: 400; --h: 300">
<img src="http://via.placeholder.com/400x300">
</a>
<a href="#" style="--w: 300; --h: 500">
<img src="http://via.placeholder.com/300x500">
</a>
</div>
这篇关于是否可以在纯CSS中实现类似Flickr的对齐画廊?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!