响应式固定宽度图像展示，无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

首先，建议使用网格系统。一个常见的已知和使用的是引导程序
有了它，你可以很容易地设置你想要的布局。

其次，要实现这种"重新定位"效果，您需要一个名为masony的JS库。它在resize事件中钩住自己，最初也钩住dom的初始化
在那里，它计算包裹所有图像的容器的宽度和图像的宽度，使用复杂的算法计算新位置，并使用您看到的动画效果重新定位它们。

也许这个教程（带源代码）将进一步帮助您：http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/