Как да създадем решетка с изображения, т.е.: Галерия

Това е различен вид галерия.
Ето цигулка http://jsfiddle.net/HVMt9/
 Когато страницата се зареди, виждате заглавието и голямо изображение със 100% височина и ширина. Искам да се превърта и частта, където завършва изображението и започва оранжевата част, тази с текста „портфолио“, искам 6-те изображения под него и оранжевата част да пасват на страницата, 100%.< br> това означава, че започвайки от оранжевата част до края на галерията трябва да е 100% височина.
Проблемът тук е, че галерията не пасва на 100% в екрана и е скъсена или нещо подобно.
> Как да направя така, че изображенията в галерията да са 100% по височина и ширина.
Използвах HTML

<div class="PortfolioMain">
    <div class="HeadingBar"> <span class="HeadingBarText"> Portfolio </span> 
    </div>
    <div class="Portfolio">
        <img src="1.png" class="HomePortfolioLeft" />
        <img src="2.png" class="HomePortfolioCenter" />
        <img src="3.png" class="HomePortfolioRight" />
        <img src="4.png" class="HomePortfolioLeft" />
        <img src="5.png" class="HomePortfolioCenter" />
        <img src="6.png" class="HomePortfolioRight" />
    </div>
</div>

CSS

.HeadingBar {
    display:table;
    width:100%;
    height:8%;
    background-color:tomato;
}
.HeadingBarText {
    display:table-cell;
    vertical-align:middle;
    padding-left:30px;
    font-size:30px;
    font-family:Helvetica, Arial, sans-serif;
}
.PortfolioMain {
    width:100%;
    height:100%;
}
.Portfolio {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.HomePortfolioLeft {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioCenter {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioRight {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}

html css responsive-design gallery photos
person user3219918    schedule 22.03.2014    source източник

Отговори (3)


arrow_upward
0
arrow_downward

Не разбрах какво точно очаквахте. Но ако искате да покажете шест изображения, покриващи цялата област на браузъра, опитайте да направите промени в HomePortfolioLeft, HomePortfolioright, HomePortfoliocenter

  height:33.33%;

To

  height:100%;
person Dr Manish Lataa-Manohar Joshi    schedule 22.03.2014
comment
Не е така, но вашият отговор най-накрая ме доведе до правилното решение, така че благодаря :D. - person user3219918; 22.03.2014
comment
Моля, дайте повече подробности за вашия отговор и какво очаквате. така че други членове също ще се възползват - person Dr Manish Lataa-Manohar Joshi; 22.03.2014

arrow_upward
0
arrow_downward

Намерих отговора сам.
Промених височината на изображенията отляво, отдясно и в центъра на 46%, тъй като div на текста на портфолиото беше 8%.
Актуализирана цигулка http://jsfiddle.net/HVMt9/1/

CSS

.HeadingBar {
    display:table;
    width:100%;
    height:8%;
    background-color:tomato;
}
.HeadingBarText {
    display:table-cell;
    vertical-align:middle;
    padding-left:30px;
    font-size:30px;
    font-family:Helvetica, Arial, sans-serif;
}
.PortfolioMain {
    width:100%;
    height:100%;
}

.HomePortfolioLeft {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioCenter {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioRight {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}
person user3219918    schedule 22.03.2014

arrow_upward
0
arrow_downward

Използването на плаващи елементи е много полезно, но ще се сблъскате с проблеми, когато използвате изображения с променлива височина или когато използвате полета, за мощна и най-лесна за потребителя мрежа ви препоръчвам да използвате Isotope или дори по-добре да използвате плъгин, който внедрява Isotope v2 доста просто: http://goo.gl/sQ6yXj

person silk    schedule 29.10.2014