【问题标题】：How to position multiple screen filled (responsive) DIV's?如何定位多个屏幕填充（响应）DIV？
【发布时间】：2014-05-19 19:03:51
【问题描述】：

我为此工作了几天，但不知道如何正确执行此操作。我想要一个包含 25 张图片的网站。现在，每个图像都应该是屏幕填充，因此是响应式的，因此在每个屏幕上，无论大小，一个图像（例如）的高度始终是 100%。现在我希望将 25 个图像定位在 5x5 的网格中。

问题：我怎样才能正确定位它？我尝试将图像放在 DIV 中，并将其 ID 的位置以 % 的形式提供到 400%。

下图解释了网格的原理，以及调整浏览器窗口大小时会发生什么（情况 2）。

有什么想法可以解决这个问题（可能使用 CSS）？以下是我查看的其他一些线程： Maintain aspect ratio of div but fill screen width and height in CSS? 和 Multiple Divs that Stretch to size of window

我正在为一位艺术家制作一个作品集网站，其想法是您可以仅通过屏幕填充图像滚动和导航（通过下拉列表和滚动到 jQuery）。

提前致谢！

【问题讨论】：

标签： css image responsive-design grid-layout

【解决方案1】：

第一：定位div

设置

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

因此，您有一个遵循视口宽度/高度的基线。
然后，创建一个包含所有带有width:500%; height:500%;的“页面”的容器

使用子divs 创建每个“页面”并给它们width:20%; height:20%;（这些 div 将是视口的 100% 宽度/高度）。并将它们向左浮动，使它们像网格一样对齐。

第二：图片

这里最好的方法是将图像设置为每个孩子的背景图像 div (="pages") 并使用 CSS 属性 background-size:contain; 和 background-position:center center; 以便它们 adpat/crop 和水平/垂直居中根据视口高度/宽度。

使用这种技术可以避免图像之间出现空白和图像失去宽高比。

Fiddle

带有<img> 标签的替代解决方案

如果您不介意在宽高比比您的图像宽的屏幕上图像的右侧/左侧有间隙，我不推荐此解决方案。

使用width:auto; height:100%; 调整图像大小以适应您的示例。它们以display:block; margin:0 auto; 水平居中

Fiddle

后台技术代码：

HTML：

<div id="wrap">
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
    
    <div class="image img4"></div>
    <div class="image img5"></div>
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
    
    <div class="image img4"></div>
    <div class="image img5"></div>
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
 
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
</div>

CSS：

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#wrap {
    width:500%;
    height:500%;
}
.image {
    width:20%;
    height:20%;
    float:left;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.img1{
    background-image: url(http://lorempixel.com/output/city-q-g-1724-977-9.jpg);
}
.img2{
    background-image: url(http://lorempixel.com/output/nature-q-c-1724-977-1.jpg);
}
.img3{
    background-image: url(http://lorempixel.com/output/fashion-q-g-1724-977-5.jpg);
}
.img4{
    background-image: url(http://lorempixel.com/output/city-q-c-1724-977-8.jpg);
}
.img5{
    background-image: url(http://lorempixel.com/output/sports-q-g-1724-977-9.jpg);
}

【讨论】：

非常感谢 web-tiki，您如何解释它是有道理的，但我自己却永远找不到。你是最好的！ :)
明天将分享结果网站！
@Kaleid0sk0p 很高兴我能帮上忙 :)
对于导航，我使用滚动到 25 个特定 DIV 的 ID 位置的 jQuery。既然 DIV 有类，jQuery 就不能再“找到”它们的位置了。你知道我怎样才能把他们的身份证还给他们吗？
@Kaleid0sk0p 你可以给每个 div 一个唯一的 id，这有什么问题吗？

【解决方案2】：

这取决于您的选择。但是你可以制作 25 个 div/section 元素，它们从屏幕上获取高度和宽度，如果这对你来说可以的话，jQuery 可以这样做吗？

在你需要制作的那些元素上

div,section{
 background-image: url(path/to/image.jpg); 
 background-size:cover; 
 background-position:left top;
}

【讨论】：