Как мы создаем сетку изображений, например: Галерея

Это другой вид галереи.
Вот скрипка 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%, потому что текстовый блок портфолио был 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