Question

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

这难以制作吗？我试图在网上关注一些指南，但结果是我的图像被拉伸而没有被裁剪。也许我完全错了，我需要创建两列，然后将图像放入其中？我将不胜感激。

我目前的代码是：

.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 ed（请参阅this answer为什么要使用float来并排放置容器而不是inline-block }）。

此后的想法是展示CSS background属性，这将允许您获得所需的溢出/定位效果。您可以阅读有关here的更多信息。

您希望填写background-image和#left-image ID的#right-image属性，以添加所需的图片。

全屏适合图像分为两列

1 个答案: