Варіант який запропонував «Key» досить не поганий, але не для великої галереї, і не досить ефективний, буває розсипається…
Запропонували також варіант JQuery Masonry (http://habrahabr.ru/sandbox/37498/) – але, є один недолік. – Якщо фотографії не однакої висоти чи ширини, то також розсипається, а точніше відступи робить не всюди однакові, то ж цей варіант відкинув, так як не хочеться в ручну усі фото кадрувати до однакових по ширині та висоті.
Ще запропонували варіант типу як і «Key» : http://jsbin.com/xonafepapo - також не зовсім підійшов.
Вийшов з положення, може комусь згодиться:
DIV блоки однакової висоти та ширини з обрізкою країів (overflow). А до img додав: object-fit: cover;-o-fit-object: cover; - фото нормально кадруються як і горизонтальні так і вертикальні, і немає не зрозумілої обрізки вертикальних фото (саме із-за цього, потрібно було мені якось їх розставляти)…
HTML:
<div class="wrapper-photo">
<div class="item"><a href="./gallery/album/hotel_0001.jpg"><img src="/gallery/album/hotel_0001.jpg"/></a></div>
<div class="item"><a href="./gallery/album/hotel_0001.jpg"><img src="/gallery/album/hotel_0001.jpg"/></a></div>
<div class="item"><a href="./gallery/album/hotel_0001.jpg"><img src="/gallery/album/hotel_0001.jpg"/></a></div>
<div class="item"><a href="./gallery/album/hotel_0001.jpg"><img src="/gallery/album/hotel_0001.jpg"/></a></div>
<div class="item"><a href="./gallery/album/hotel_0001.jpg"><img src="/gallery/album/hotel_0001.jpg"/></a></div>
</div>
CSS:
.wrapper-photo {
width: 960px;
height: auto;
border-top: 4px solid #E18727;
margin: 10px 0 0 0;
padding: 10px;
color: #004242;
overflow: hidden;
display: block;
text-align: center;
}
.item {
width: 310px;
height: auto;
display: inline-block;
margin: 0;
overflow: hidden;
text-align: center;
}
.wrapper-photo img {
width: 310px;
height: 310px;
display: block;
object-fit: cover;
-o-fit-object: cover;
overflow: hidden;
margin: 0 0px 4px 0;
cursor: pointer;
}
.wrapper-photo img:hover {
cursor: pointer;
-webkit-filter: grayscale(100%);
opacity: 0.8;
width: 310px;
height: 310px;
display: block;
object-fit: cover;
overflow: hidden;
margin: 0 0px 4px 0;
cursor: pointer;
}
Результат:
