我一直在使用 miromannino.github.io 作为图库布局几页,最近我一直在试图弄清楚是否可以在原始CSS中做到这一点,可能是使用flexbox。
问题在于水平和垂直图片的变化,它们应始终填充容器宽度的 100%。我得到的最接近的是:
.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>
我有大小和方向作为类。我试过使用
align-content: stretch;
align-items: stretch;
但是,将图像大小与 A 标签对齐变得棘手。
那么,有什么想法吗?:)
虽然这个问题已经有一年多了,但我最近试图解决同样的事情,我想出了以下完全响应的仅限 CSS 的类似 Flickr 的合理画廊解决方案:
.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>
我不确定你在那里使用max-width: 90vw
的目标是什么,但你可以用固定大小的缩略图来实现这一点。下面的 CSS 将缩放图像以填充容器,使其垂直和水平居中裁剪。
.jgal {
/* set font-size to 0 to avoid the whitespace between HTML elements causing spaces between the photos */
font-size: 0;
}
a.jgallink {
/* set desired image size */
width: 320px;
height: 240px;
/* set space between photos */
margin-right: 1px;
position: relative;
overflow: hidden;
display: inline-block;
}
img.jgalimg {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
img.jgalimg.ver {
width: 100%;
height: auto;
}
在代码笔中打开
这改编自这篇博客文章,该博客文章从Wordpress媒体库中获得了该技术。
这是我通过flexbox
实现的。
.jgal{
width: 100%;
display: flex;
}
.jgal a{
border-right: 3px solid #fff;
}
.jgal img{
width:100%;
height: 100%;
object-fit: cover;
}
https://jsfiddle.net/1wrn8k4v/2/