Question

我有8张相同的矩形照片，我希望无缝填充整个网页（即使在调整大小时）两行，我不知道该怎么做。

基本上我打算制作一个div并放入父级25%宽度的所有图像（这样第五个图像将向下流到第二个级别）。

但是，我不确定是否应该设置width: 100%或height: 100%。图像的长度大于宽度，我必须保留该宽高比。显然，如果有人的浏览器窗口是一个方形，它们无法无缝地适应，我只是想知道人们用什么策略来获得这四个无缝行外观。

由于

Answer 1

今天早上把我的评论写进一个更深思熟虑的答案。这个使用图像元素而不是CSS背景。

尝试这样的事情，或许？

<div class="container">
    <div class="one"><img src="http://placehold.it/350x150" /></div>
    <div class="two"><img src="http://placehold.it/350x150" /></div>
    <div class="three"><img src="http://placehold.it/350x150" /></div>
    <div class="four"><img src="http://placehold.it/350x150" /></div>
    <div class="five"><img src="http://placehold.it/350x150" /></div>
    <div class="six"><img src="http://placehold.it/350x150" /></div>
    <div class="seven"><img src="http://placehold.it/350x150" /></div>
    <div class="eight"><img src="http://placehold.it/350x150" /></div>
</div>

然后在你的CSS中：

.container {
    width: 100%;
    height: 100%;    
}

img {
    width: auto;
    height: 100%;

    position: absolute;
    left: 50%;
    top: 50%;

    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight {
    position: absolute;
    overflow: hidden;
}
.one, .two, .three, .four {
    top: 0;
    bottom: 50%;
}
.five, .six, .seven, .eight {
    top: 50%;
    bottom: 0;
}
.one, .five {
    right: 75%;
    left: 0;
}
.two, .six {
    right: 50%;
    left: 25%;
}
.three, .seven {
    right: 25%;
    left: 50%;
}
.four, .eight {
    left: 75%;
    right: 0;
}

在某些浏览器中，这两行不会完全排列，所以我可能会尝试将它们重叠一点（例如，给.one，.two，.three和.four底部值为50.5％）。< / p>

请注意，如果您关心IE 8，您可能需要使用JS而不是CSS来定位图像，因为不支持转换。

编辑：要回答你的问题，“是否绝对有必要设置左右偏移量？” - 不是他们两个，不。但是我使用它们而不是声明显式宽度。左设置：25％;和右：50％;或多或少相当于左：25％;宽度：25％;这只是一个偏好的问题，真的！

Answer 2

http://jsfiddle.net/HexM4/1/ ＆lt; - 这可能不是你想要的......对吗？

http://jsfiddle.net/HexM4/3/ ＆lt; - 这是怎么回事？

div {
    width: 25%;
    float: left;
}
img {
    width: 100%;
    display: block;
}

4个div，4列，每列宽25％，其中2个图像在其内部堆叠。为了防止丑陋的空白，＆＃34; display：block;＆＃34;在img元素上也是如此。

P.S。：当然，如果一行中的所有图像都具有相同的高度，那么您就会安顿下来。任何这两个jsfid都会让你开心。

编辑：糟糕，误会？

当然，你不能总是用2行图像填充100％的宽度和高度（并且不超过100％！），至少不会影响它们的宽高比。或者在这里或那里将它们切成两半，以防你在我的例子中为每一列添加许多图像（+＆＃34;溢出：隐藏;＆＃34;在父div上，绝对定位（或固定）和大小高度的100％和用户浏览器窗口宽度的100％）。没有我能想到的可靠解决方案。

tl; dr：用户视口的宽高比可以，并且确实彼此不同。不，你不能总是在其中放入相同的8张图片而不改变它们的宽高比。

使8个矩形图像填充整个屏幕，具有原始宽高比和流畅布局

2 个答案: