Question

我正在尝试为朋友创建一个网站，他希望在他的主页上产生类似于他们的HubSpot的效果。如果您在浏览器中打开HubSpot，我想要的效果就在主导航下。左边有两个图像，左边的图像会改变右边的图像。我不知道这个效果的正确用语是什么。

我几乎已经完成了网站，但我的这个HubSpot效果的CSS实现有点儿错误。使用带有Retina Display的三星Galaxy S5，iPhone 5和Mac电脑访问网站时左下图像会崩溃。每个图像应该是父母高度的一半。我想实现与HubSpot一样的效果。

我无法弄清楚为什么左侧的底部图像会崩溃。以下是我的代码JSFiddle的链接。我真的很感谢你的帮助！

我认为它与高分辨率和“Retina”显示器有关，因为在我的1920x1080高清分辨率的简单显示器上，网站工作得很好，没有这个崩溃的问题。

HTML：

<div class="row column hOuter">
    <div class="small-12 medium-6 hLeftParent columns">
            <div class="small-12 medium-6 columns hLeft1">
                <span>
                    <h3>Workshops</h3>
                    <p>Get creative. Become certified.</p>
                    <a class="btn-transparent" href="#">Learn More</a>
                </span>
            </div>
            <div class="small-12 medium-6 columns hLeft2">
                <span>
                    <h3>Blog</h3>
                  <p>Coming Soon</p>
                </span>
            </div>
    </div>

    <div class="small-12 medium-6 hRight columns">
        <span>
            <h3>Download</h3>
            <p>Get certified and join this new approach to event design!</p>
            <a class="btn-transparent" href="#">Book Now!</a>
        </span>
    </div>
</div>

CSS

.hOuter {
    max-width: initial; 
    height:100%;
    border:0.25rem solid #fff;
}

.hOuter, hOuter div {
    margin:0 auto;
    padding:0;
    box-sizing: border-box;
}

.hLeftParent {
    height:100%;
    overflow:hidden;
    background: transparent;
    padding:0;
}

.hLeft1,
.hLeft2 {
    background: transparent;
    min-width:100%;
    height:50%;
    min-height:50%;
    display:table;
    overflow:hidden;
    padding:0;

}

.hLeft1 span,
.hLeft2 span,
.hRight span {
    text-align: center;
    color:#fff;
    display:table-cell;
    vertical-align: middle;
    min-width:100%;
}


.hLeft1 {
    border-bottom:0.125rem solid #fff;
    height:30rem;
    min-height:30rem;
    background: url("http://placekitten.com/g/200/300") no-repeat 0 0 / cover;
}

.hLeft2 {
    border-top:0.125rem solid #fff;
    height:30rem;
    min-height:30rem;
    background: url("http://placekitten.com/g/200/300") no-repeat 0 0 / cover;    
}

.hOuter .hRight {
    background: #ccc;
    border-left:0.25rem solid #fff;
    background: url("http://placekitten.com/g/200/300") no-repeat center bottom / cover;
    padding:0;
    height:100%;
    display: table;
}

.hOuter .hRight span {
    background-color: rgba(91,91,91, 0.8);
}

Answer 1

嗯，不确定我是否理解你的问题。您似乎在左侧容器中声明了两个不同的高度。我尝试删除Left1和amp;的第二个声明。 Left2，我想我得到了你想要的效果。

.hLeft1 {
    border-bottom:0.125rem solid #fff;
    /*height:30rem;*/
    /*min-height:30rem;*/
    background: url("http://placekitten.com/g/200/300") no-repeat 0 0 / cover;
}

.hLeft2 {
    border-top:0.125rem solid #fff;
    /*height:30rem;*/
    /*min-height:30rem;*/
    background: url("http://placekitten.com/g/200/300") no-repeat 0 0 / cover;    
}

折叠盒（图像菜单）

1 个答案: