如何定位多个屏幕填充（响应）DIV＆s？s？

Question

我在这方面工作了几天，但无法弄清楚如何正确地做到这一点。我想拥有一个包含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）。

提前致谢！

Answer 1

首先：定位div

设置

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

所以你有一个跟踪视口宽度/高度的基线 然后，制作一个包含所有＆＃34;页面的容器＆＃34;与width:500%; height:500%;

使用子div来创建每个＆＃34;页面＆＃34;然后给它们width:20%; height:20%;（这些div将是视口的100％宽度/高度）。然后将它们向左漂浮，使它们像网格一样对齐。

第二：图片

这里最好的方法是将图像设置为每个孩子div（=＆＃34;页面＆＃34;）的背景图像，并使用CSS属性background-size:contain;和{{1}因此，根据视口高度/宽度，它们adpat / crop和center horizo​​ntaly / verticaly。

使用此技术可以避免图像和图像之间的空白，从而消除图像宽高比。

Fiddle

---

使用background-position:center center;代码的替代解决方案

如果你不介意在宽高比比你的图像宽的屏幕上的图像的右/左边有间隙，我不会推荐这个解决方案。

使用<img>调整图片大小以适应您的示例。它们以width:auto; height:100%;

为中心

Fiddle

---

背景技术代码：

HTML：

display:block; margin:0 auto;

CSS：

<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>

Answer 2

这取决于您的选择。但你可以制作25个div / section元素，从屏幕jQuery获得高度和宽度可以做到这一点，如果这对你好吗？

关于你需要做的那些元素

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