1

Тема: Вирівнювання по вертикалі з нефіксованою висотою елемента

Є блочний контейнер фіксованої ширини, в ньому елементи img (display: inline-block;) які мають різну висоту та фіксовану ширину (усі ми знаємо, що є фото як вертикальні (книжкові) і горизонтальні (альбомні), яким чином мені вирівняти фото в контейнері, щоб було як на картинці. (не залежно від того, у якій послідовності йдуть фотографії вертикальні і горизонтальні, і з різною висотою).

Зараз так:

position: relative; 
width: 310px;
height: auto;    
margin: 6px 6px 0 0;
display: inline-block;
vertical-align: top;

http://s017.radikal.ru/i418/1503/f8/f97f2e6e5536t.jpg

А потрібно так:
http://s43.radikal.ru/i099/1503/6f/8bc429e1620ft.jpg

2

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

Щось мені підказує, що тут треба JS.

3 Востаннє редагувалося Key (25.03.2015 13:22:42)

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

<div style="float: left; width: 100%;font-size: 0">
    <div style="display: inline-block; /*float: left;*/ vertical-align: top">
        <img src="" alt=""/><img src="" alt=""/><img src="" alt=""/>
    </div>
    <div style="display: inline-block; /*float: left;*/ vertical-align: top">
        <img src="" alt=""/><img src="" alt=""/><img src="" alt=""/>
    </div>
    <div style="display: inline-block; /*float: left;*/ vertical-align: top">
        <img src="" alt=""/><img src="" alt=""/><img src="" alt=""/>
    </div>
</div>

+ img додай марджін 1-2 пікселі.
батьківський відз постав який  треба ;)
флоат не обовязковий якщо користуєшся clear fix - ом.

4

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

Варіант який запропонував «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;
}

Результат:
http://s015.radikal.ru/i332/1503/82/2e0d0ee9532ft.jpg

5 Востаннє редагувалося Key (26.03.2015 14:42:54)

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

object-fit
не дуже підтримуване

+ вчить сss
для чого на ховер повторювати стилі?)

6

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

На останніх версіях браузерів IE опера, хром і мозілла - працює норм... (як мобільні устройства не знаю, не провіряв)...

7

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

для чого на ховер повторювати стилі?)

 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;

для анімації:

    width: 320px;
    height: 320px;
transition: 0.4s;

8

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

і margin: 0 не фіксить inline-blok, якщо вже так то -2px

9

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

ну а всі інші стилі для чого, вони є на батьку і цього достатньо ;)

10 Востаннє редагувалося Key (26.03.2015 14:50:10)

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

Andrews написав:

На останніх версіях браузерів IE опера, хром і мозілла - працює норм... (як мобільні устройства не знаю, не провіряв)...

якби всі користувалися б останіми версіями то верстака була б в мільйони разів крутішою...
потрібно і за моб. думати навіть скажу що за моб тре думати в першу чергу...

11

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

Key - привичка Контрол+Си :-)

12 Востаннє редагувалося Key (26.03.2015 15:18:18)

Re: Вирівнювання по вертикалі з нефіксованою висотою елемента

Andrews написав:

Key - привичка Контрол+Си :-)

не робіть так :-X