(CSS) Макет сетки с динамическими размерами изображений

Question

Я пытаюсь создать макет плитки/макет сетки с динамическими размерами изображений. Идея должна создать это: http://i.imgur.com/ypmk6yR.jpg

Но размер окна должен меняться в зависимости от ширины или высоты браузера. Еще лучше было бы, когда ящики также получают меньше на строку, если браузер слишком короткий по ширине. Полный ряд ящиков/изображений всегда должен быть полной ширины страницы. И каждое изображение квадратное.

Кто создал этот http://codepen.io/davidkpiano/pen/EaxjBj

С ШАОН, но я понятия не имею, как работать с SASS, но думал, что это может быть достигнуто без SASS.

Это то, что я играл с, но я никогда не получал Это действительно работает

.img_left { 
     float: left; 
     padding-bottom: 500px; 

} 

.img_left img { 
     width: 19.82vw; 
     height: 19.82vw; 
} 

.img_work img { 
     width: 19.82vw; 
     height: 19.82vw; 
     float: left; 
} 

.img_left мой DIV для первого изображения. Есть ли хорошее решение моей проблемы?

Answer 1

Скрипт codepen, который вы опубликовали, очень просто. Позвольте мне «декодировать» Sass для вас, это может быть то, что вы ищете:

* { 
    box-sizing: border-box; 
    position: relative; 
} 

.tile { 
    float:left; 
    width: 25%; 
    padding: 25% 0 0 0; 
    height: 0; 
    overflow: hidden; 
    transition: 0.3s all ease-in-out; 
} 
.tile > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 
// Make sure rows are flush 
.tile:nth-child(4n + 1) { 
    clear: left; 
} 

// Small screens 
@media (max-width: 768px) { 
    .tile { 
     width: 50%; 
     padding: 50% 0 0 0; 
    } 
     .tile:nth-child(2n + 1) { 
     clear: left; 
    } 
} 

Answer 2

Вот хороший SASS в CSS конвертер для использования в будущем. По крайней мере, пока вы не станете более знакомыми с SASS.

http://sassmeister.com/