純粋なCSSでFlickrのような正当化されたギャラリーを実装することは可能ですか？

Question

私はいくつかのページのギャラリーレイアウトとしてmiromannino.github.ioを使用していましたが、最近ではフレックスボックスを使って生のCSSでこれを行うことが可能かどうかを調べようとしています。

問題は水平と垂直の画像が異なり、常に容器の幅の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> 

私はサイズやクラスなどの方向性を持っています。私は使用しようとしました

しかし、イメージのサイズをタグに合わせることは難しくなります。

だから、どんなアイデアですか？ :)

Answer 1

ここでは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; 
} 

open in codepen

これは、Wordpressのメディアライブラリから技術を持っthis blog postから適応されました。

Answer 2

私の実装は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/

Answer 3

質問は、以上の歳です私は最近、同じことをうまくしようとしていたと私は次のように完全に対応した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>