Отзывчивая витрина с фиксированной шириной без JS

Question

Я бы хотел создать простой отзывчивый веб-сайт с витриной изображений. Сам по себе, но если есть шаблон, не проблема. Но я все равно хочу это узнать.

Требование:

• изображение с одной шириной независимо от браузера ширина
• изображений всегда в середине страницы (0 авто)
• количества столбцов - изображения меняются с ширина браузера
• нет ограничение на рост изображение. только фиксированная ширина (+ сохранить соотношение сторон).
• отличный пример: www.kristianhammerstad.com - попробуйте изменить размер окна, я хотел бы добиться именно этого. Работает также в мобильном браузере (показывает изображение после изображения)
• Я бы предпочел без JS, только медиа-запросы - возможно?

Вот что я до сих пор:

* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } 
 

 
body { font: normal 14px Helvetica, Arial, sans-serif; line-height: 30px; color: #333; } 
 

 
.left { float: left; } 
 
.right { float: right; } 
 

 
.clearfix:before, 
 
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } 
 
.clearfix:after { clear: both; } 
 

 
hr { 
 
    margin: 0; 
 
    border: 0; 
 
    width: auto; 
 
    border-top: 1px solid #aaaaaa; 
 
    opacity: .25; 
 
    margin: 0 auto; 
 
} 
 

 
h1 { 
 
    letter-spacing: 2px; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    font-size: 2em; 
 
    line-height: 1.3em; 
 
    color: #333; 
 
} 
 

 
h2 { 
 
    letter-spacing: 1px; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    font-size: 1em; 
 
    margin-bottom: 60px; 
 
    color: #666; 
 
    text-transform: uppercase; 
 
} 
 

 
/* ---------------------------------------------------------- */ 
 

 
.wrapper { 
 
    width: 950px; margin: 0 auto; 
 
} 
 

 
#name { 
 
    margin-top: 50px; 
 
} 
 

 
/* ---------------------------------------------------------- */ 
 

 
#works { 
 
    margin-top: 50px; 
 
} 
 

 
#works h2 { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    letter-spacing: 1px; 
 
    font-weight: 300; 
 
    text-align: left; 
 
    font-size: 1.3em; 
 
    margin-bottom: 10px; 
 
    color: #666; 
 
    text-transform: none; 
 
} 
 

 
#work-one { 
 
    display: block; 
 
    width: 460px; 
 
    height: 500px; 
 
    margin-right: 30px; 
 
    margin-bottom: 30px; 
 
} 
 

 
#work-two { 
 
    display: block; 
 
    width: 460px; 
 
    height: 300px; 
 
} 
 

 
#work-three { 
 
    display: block; 
 
    width: 460px; 
 
    height: 700px; 
 
    margin-bottom: 30px; 
 
} 
 

 
#work-four { 
 
    display: block; 
 
    width: 460px; 
 
    height: 200px; 
 
} 
 

 
/* ---------------------------------------------------------- */ 
 

 
@media (min-width: 768px) and (max-width: 1024px) { 
 

 
/* I am not sure about break points */ 
 

 
} 
 

 
@media only screen and (min-width: 320px) and (max-width: 767px) { 
 

 
/* I am not sure about content here */ 
 

 
}

<div class="wrapper"> 
 
     
 
     <div id="name">  
 
       
 
      <h1>IMAGES</h1> 
 
      <h2>showcase</h2> 
 

 
     </div> 
 

 
     <div id="works"> 
 

 
      <div class="left"> 
 
      
 
       <a id="work-one" href="#"><img src="http://placehold.it/460x500?text=Placeholder" ></a> 
 
       
 
       <a id="work-two" href="#"><img src="http://placehold.it/460x300?text=Placeholder" ></a> 
 
      
 
      </div> 
 

 
      <div class="right"> 
 

 
       <a id="work-three" href="#"><img src="http://placehold.it/460x700?text=Placeholder" ></a> 
 
       
 
       <a id="work-four" href="#"><img src="http://placehold.it/460x200?text=Placeholder" ></a> 
 
     
 

 
      </div>   
 

 
     </div><div class="clearfix"></div> 
 

 
    </div>

Answer 1

Прежде всего рекомендуем использовать систему в сетки. Одним из распространенных известных и используемых будет bootstrap.
С его помощью вы можете легко установить желаемый макет.

Во-вторых, для достижения этого эффекта "репозиционирования", вам потребуется библиотека JS под названием masonry. Он перехватывает себя в событии изменения размера, а также вначале при инициализации dom.
Здесь он вычисляет ширину контейнера, обертывая все изображения и ширину изображений, вычисляет новые позиции с использованием сложных алгоритмов и перемещает их с помощью эффекта анимации, который вы видите.

Может быть, это учебник (с источником) поможет вам в дальнейшем: http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/