Как создать галерею, которая адаптируется к разным размерам изображений?

Question

На этом снимке: по этой ссылке:

http://www.autofinesse.co.uk/share-n-shine/

Есть изображения различных размеров, то CSS, кажется, генерируется автоматически, я хотел бы клиент, чтобы иметь возможность загрузить на WordPress и не нужно слишком беспокоиться о стандартных размерах изображений. Эта галерея полностью выровнена для каждого изображения, изменяет высоту между строками и не делает их одинакового размера.

Есть ли библиотека, которая позволит мне это сделать? Единственный способ, которым я смог это сделать, - использовать форинговое позиционирование, которое обрезает изображение, а также не позволяет изображениям разных размеров.

Или есть какой-то алгоритм javascript для этого?

Answer 1

Я мог бы дать вам решение css, но вы сказали для клиента на WP.

Для этого я предлагаю использовать плагин как Unite Gallery, который я использую для своих WP и клиентов Joomla.

Вот экран. Он также позволяет использовать текстовые наложения, такие как изображение, которое вы разместили.

https://wordpress.org/plugins/unite-gallery-lite/

Вот пример CSS с помощью гибкого

.flex { 
 
    background: #ddd; 
 
    padding: 1px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
} 
 

 
.flex-4by3, .flex-3by4, .flex-1by1, .flex-2by1, .flex-1by2, .flex-3by1, .flex-1by3 { 
 
    margin: 1px; 
 
    background-color: #efefef; 
 
    background-size: cover; 
 
    position: relative; 
 
} 
 
.flex-4by3:before, .flex-3by4:before, .flex-1by1:before, .flex-2by1:before, .flex-1by2:before, .flex-3by1:before, .flex-1by3:before { 
 
    content: ""; 
 
    display: block; 
 
} 
 

 
.flex-4by3 { 
 
    flex-grow: 1.33333; 
 
    flex-basis: 266.66667px; 
 
    max-height: 320px; 
 
    max-width: 426.66667px; 
 
    background-image: url("http://lorempixel.com/267/200/food"); 
 
} 
 
.flex-4by3:before { 
 
    padding-top: 75%; 
 
} 
 

 
.flex-3by4 { 
 
    flex-grow: 0.75; 
 
    flex-basis: 150px; 
 
    max-height: 320px; 
 
    max-width: 240px; 
 
    background-image: url("http://lorempixel.com/150/200/food"); 
 
} 
 
.flex-3by4:before { 
 
    padding-top: 133.33333%; 
 
} 
 

 
.flex-1by1 { 
 
    flex-grow: 1; 
 
    flex-basis: 200px; 
 
    max-height: 320px; 
 
    max-width: 320px; 
 
    background-image: url("http://lorempixel.com/200/200/food"); 
 
} 
 
.flex-1by1:before { 
 
    padding-top: 100%; 
 
} 
 

 
.flex-2by1 { 
 
    flex-grow: 2; 
 
    flex-basis: 400px; 
 
    max-height: 320px; 
 
    max-width: 640px; 
 
    background-image: url("http://lorempixel.com/400/200/food"); 
 
} 
 
.flex-2by1:before { 
 
    padding-top: 50%; 
 
} 
 

 
.flex-1by2 { 
 
    flex-grow: 0.5; 
 
    flex-basis: 100px; 
 
    max-height: 320px; 
 
    max-width: 160px; 
 
    background-image: url("http://lorempixel.com/100/200/food"); 
 
} 
 
.flex-1by2:before { 
 
    padding-top: 200%; 
 
} 
 

 
.flex-3by1 { 
 
    flex-grow: 3; 
 
    flex-basis: 600px; 
 
    max-height: 320px; 
 
    max-width: 960px; 
 
    background-image: url("http://lorempixel.com/600/200/food"); 
 
} 
 
.flex-3by1:before { 
 
    padding-top: 33.33333%; 
 
} 
 

 
.flex-1by3 { 
 
    flex-grow: 0.33333; 
 
    flex-basis: 66.66667px; 
 
    max-height: 320px; 
 
    max-width: 106.66667px; 
 
    background-image: url("http://lorempixel.com/67/200/food"); 
 
} 
 
.flex-1by3:before { 
 
    padding-top: 300%; 
 
}

<div class="flex"> 
 
    <div class="flex-4by3"></div> 
 
    <div class="flex-1by1"></div> 
 
    <div class="flex-2by1"></div> 
 
    <div class="flex-1by2"></div> 
 
    <div class="flex-2by1"></div> 
 
    <div class="flex-3by4"></div> 
 
    <div class="flex-3by4"></div> 
 
    <div class="flex-3by4"></div> 
 
    <div class="flex-1by2"></div> 
 
    <div class="flex-3by1"></div> 
 
    <div class="flex-1by1"></div> 
 
    <div class="flex-2by1"></div> 
 
    <div class="flex-1by3"></div> 
 
    <div class="flex-4by3"></div> 
 
    <div class="flex-1by1"></div> 
 
    <div class="flex-2by1"></div> 
 
    <div class="flex-4by3"></div> 
 
    <div class="flex-2by1"></div> 
 
    <div class="flex-3by4"></div> 
 
    <div class="flex-3by4"></div> 
 
    <div class="flex-1by1"></div> 
 
    <div class="flex-2by1"></div> 
 
</div>

Answer 2

HTML

<div> 
    <img src="http://imgur.com/kj4qwHl.jpg"> 
    <img src="http://imgur.com/q6pFhhE.jpg"> 
    <img src="http://imgur.com/ngdnoYI.jpg"> 
    <img src="http://imgur.com/FkrSS5O.jpg"> 
    <img src="http://imgur.com/ux0Om6X.jpg"> 
    <img src="http://imgur.com/2ProEc9.jpg"> 
    <img src="http://imgur.com/iu39yRs.jpg"> 
    <img src="http://imgur.com/gx0iOdT.jpg"> 
    <img src="http://imgur.com/6kEuRYX.jpg"> 
</div> 

CSS (SASS)

@mixin rspv($w) { 
    @media screen and (max-width:$w) { 
    @if $w==680px { 
     img:nth-child(n1) { 
     width:100%; 
     } 
    } @else { 
     @content; 
    } 
    } 
} 
@mixin grid($pc...) { 
    $len:length($pc); 
    img { 
    vertical-align:top; 
    transition:all 0.5s; 
    @for $i from 1 through $len { 
     &:nth-child(#{$i}) { 
     width: nth($pc,$i)+'%'; 
     } 
    } 
    } 
} 
div { 
    margin:0 auto; 
    padding:0 100px; 
    +grid(26,40.7,33.3,41.9,26.7,31.4,29,38.5,32.5); 
    @include rspv(860px) { 
    +grid(39,61,45,55,46,54,42.9,57.1,100); 
    } 
    +rspv(680px); 
} 

ОБЪЯСНЕНИЕ

В rspv Mixin (отзывчивым) проверяет, если ширина соответствует 680px затем (even) и (odd) изображения будут иметь полный размер. Если нет, то вступает в игру mixin grid.

Помимо нормального свойства: пары значений, grid принимает ширину от заданного параметра $pc (в процентах) и использует его в цикле for. Он будет проходить через $i в зависимости от длины $pc и возвращает каждое значение с карты $pc.

Поскольку все изображения находятся внутри div, все микшины будут включены туда. Сначала grid не требует ответного требования, второе - и последнего +rspv(680px) не требует расчета ширины.

Это должно работать так, как показывает ваша ссылка на автомобили. Не много кода. Я рекомендую, получить прекомпилятор для CSS. Без этого было бы намного больше кода и намного сложнее составить план.

DEMO HERE