Возможно ли реализовать оправданную галерею Flickr в чистом CSS?

Question

Я использовал 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> 

Я имею размеры и ориентацию, как класс. Я пробовал использовать

но тогда выравнивание размера изображения с тегом становится сложным.

Итак, любые идеи? :)

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

Это был заимствован из this blog post который получил технику из медиа-библиотеки Wordpress.

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>