Question

我试图让三张图片同样占据页面的100％。我用这个基本代码修正了宽度：

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

.container {
    width:100%;
}

.inner {
width:101%;
overflow:hidden;
}

.column {
width:33.33333333%;
float:left;
}

.column img {
width:100%;
height:auto;
}

</style>

<div class="container">
    <div class="inner">
        <div class="column">
            <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
        </div>
        <div class="column">
            <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
        </div>
        <div class="column">
            <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
        </div>
    </div>
</div>

这是小提琴：http://fiddle.jshell.net/xbtjzof8/

我要做的是让图像占据100％的高度和宽度，同时放大以适应。但我在这方面遇到了问题。

编辑：像这样：http://i.imgur.com/7KD6KcU.jpg但有三张图片。或者像http://www.raysrestaurants.com/index当然没有侧导航部分。

Answer 1

如果我理解了你想要的东西，你可以通过强制图像的高度为100％，保持宽度不变，并确保在包含图像的列上隐藏溢出来实现这一点，所以它会做的。这里的小提琴：

http://fiddle.jshell.net/Lbeax6ju/2/

你在寻找那个？

编辑：正如我忘了说的那样，也就是那个hungerstar所说的。

Answer 2

不完美但有效：

html, body, .container, .inner, .column, .column img {
    height: 100%;
}

百分比高度仅在父元素设置了高度时才有效。在这种情况下，我们将“级联” height: 100%保留到图像中。

创建3个完全相同的图片，占据页面的高度和宽度

2 个答案: