html - 全屏适合两列图像

Question

我是初学者，尝试自己制作一页，但是效果并不好。我将尝试解释我需要什么:全屏页面有两个图像，一个图像将覆盖浏览器窗口水平空间的 50%，第二个图像将在右侧覆盖此页面的其余部分。我需要两个图像都能响应并始终保持 100% 的高度。调整窗口大小时，将裁剪两个图像的左侧和右侧。与此非常相似:http://www.gt3themes.com/website-templates/soho/striped_landing.html

这个做起来难吗？我尝试遵循网络上的一些指南，但结果是我的图像被拉伸(stretch)而不是被裁剪。也许我完全错了，我需要创建两列然后将图像放入其中？我将不胜感激任何帮助。

我当前的代码是:

.photo{
    size: 100%;
    position: relative;
    overflow: hidden;
}

.photo img{
    max-width: 50%;
    height: 100%;
}

Answer 1

您链接的网站或多或少做了这样的事情:

http://jsfiddle.net/xnLn6s5o/

HTML

<div id="container">
    <div id="left" class="halfwidthcontainer">
        <div id="left-image" class="image"></div>
    </div>
    <div id="right" class="halfwidthcontainer">
        <div id="right-image" class="image"></div>
    </div>
</div>

CSS

html, body, #container, #left, #right, #left-image, #right-image {
    height:100%;
}

.halfwidthcontainer {
    float: left;
    width: 50%;
}

.image {
    background-size: container;
    background-repeat: no-repeat;
    background-position: 50% 50%;

}

#left-image {
    background-color: red;
    background-image: url('');
}

#right-image {
    background-color: blue;
    background-image: url('');
}

一般的想法是两个容器并排放置， float (参见 this answer 为什么要使用 float 来并排放置容器而不是内联 block )。

此后的想法是利用 CSS background 属性，这将使您获得所需的溢出/定位效果。您可以阅读更多相关信息 here .

您将要填写 #left-image 和 #right-image ID 的 background-image 属性添加您想要的图像。