使容器中的图像填充页面的一半

Question

所以，我有一个问题，我无法在谷歌上找到答案，所以我希望你能在这里帮助我。

我有一个分为两部分的横幅，我希望两个图像中的每一个都向左完整，向右完整 - 但文本需要保持在容器大小。

目前，我已经制作了一个带有文本的容器，以及一个带有图像的容器流体，我已经使用 margin-top 属性将其向上移动。 这对我不起作用。

看我的例子：

这是我不满意的代码

JSfiddle

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .multiBanner { position: relative; margin: auto; top: 0px; left: 0; right: 0; z-index: 0; } @media (max-width: 767px) { .multiBanner { display: none; } } .multiBanner .treatment { height: 575px; border-left: 2.5px solid white; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../img/1.jpeg); background-size: cover; background-position-y: 65%; } @media (max-width: 992px) { .multiBanner .treatment { height: 650px; } } .multiBanner .webshop { height: 575px; border-right: 2.5px solid white; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../img/2.jpeg); background-size: cover; background-position-y: 87%; } @media (max-width: 992px) { .multiBanner .webshop { height: 650px; } } .multiBannerText { position: absolute; z-index: 1; margin: auto; top: 200px; left: 0; right: 0; } @media (max-width: 767px) { .multiBannerText { margin-top: -20px; position: relative; top: 0; } } .multiBannerText .col-sm-6:first-child { padding-right: 50px; } @media (max-width: 767px) { .multiBannerText .col-sm-6:first-child { padding-right: 15px; padding: 50px 15px; padding-top: 35px; background: #D4CEC0; } } .multiBannerText .col-sm-6:last-child { padding-left: 50px; } @media (max-width: 767px) { .multiBannerText .col-sm-6:last-child { padding-right: 15px; padding: 50px 15px; padding-top: 35px; background: #E6E2D9; } } .multiBannerText h1 { font-family: 'Playfair Display', serif; color: #333; font-size: 44px; line-height: 54px; margin-top: 0px; } @media (max-width: 767px) { .multiBannerText h1 { font-size: 28px; line-height: 38px; } } @media (min-width: 768px) { .multiBannerText h1 { color: white; } } .multiBannerText p { margin-bottom: 50px; } @media (min-width: 768px) { .multiBannerText p { color: white; } } @media (min-width: 768px) { .multiBannerText .line { background: white; } } .multiBannerText .cta { background: #b9b28c; color: white; border-color: #b9b28c !important; } .multiBannerText .cta:hover, .multiBannerText .cta:focus, .multiBannerText .cta:active { background: #b9b28c !important; border-color: #b9b28c !important; color: white !important; }

 <div class="container multiBannerText"> <div class="row"> <div class="col-sm-6"> <h1>Bestil vores unikke hårprodukter i webshoppen</h1> <div class="line"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p> <button type="button" class="btn btn-default cta hvr-float">Gå til webshoppen</button> </div> <div class="col-sm-6 animated fadeInRight"> <h1>Markedets bedste hårbehandlinger - dokumenteret</h1> <div class="line"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p> <button type="button" class="btn btn-default cta hvr-float">Sådan foregår behandlingen</button> </div> </div> </div> <div class="container-fluid multiBanner"> <div class="row"> <div class="col-sm-6 webshop"></div> <div class="col-sm-6 treatment"></div> </div> </div>

Answer 1

这是我针对您的问题的响应式布局版本。

1. 我已将每个文本与其图像放在同一个单元格中。 这些单元是相对定位的。

2. 我使用col-sm-6类将每个文本包装到 div 中。 我将这些 div 包装成具有固定宽度的容器。 这些容器是绝对定位的。

3. 当屏幕宽度小于 481px 时，文本的每个部分都位于其图像下方。

请检查结果： jsfiddle • codepen

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .col-xs-12 { background: #9c6; margin-bottom: 12px; margin-top: 12px; min-height: 200px; } .half-left img, .half-right img { height: auto; width: 100%; } @media (min-width: 481px) { .half-left, .half-right { overflow: hidden; padding: 0; position: responsive; } .half-left > .container, .half-right > .container { position: absolute; top: 0; } .half-left > .container { right: 0;} .half-right > .container { left: 0; } }

 <div class="container"> <div class="row"> <div class="col-xs-12"> <h2>The beginning</h2> <p>... is in the container</p> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 half-left"> <img src="https://via.placeholder.com/800x600/c69/f9c/?text=Left%20Image" alt=""> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-6"> <h2>The left half</h2> <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> </div> </div> </div> </div> <div class="col-sm-6 half-right"> <img src="https://via.placeholder.com/800x600/69c/9cc/?text=Right%20Image" alt=""> <div class="container"> <div class="row"> <div class="col-sm-6"> <h2>The right half</h2> <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <h2>The ending</h2> <p>... is in the container again</p> </div> </div> </div>

Answer 2

在col-sm-6 webshop和col-sm-6 处理中添加一行，使用 offset 和 push 调整列

<div class="container-fluid multiBanner">
    <div class="row">

        <div class="col-sm-6 webshop">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-4">
                <h1>Bestil vores unikke hårprodukter i webshoppen</h1>
                <div class="line"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p>
                <button type="button" class="btn btn-default cta hvr-float">Gå til webshoppen</button>
                </div>
            </div>
        </div>
        <div class="col-sm-6 treatment">
            <div class="row">
                <div class="col-sm-8 col-sm-push-1">
                <h1>Markedets bedste hårbehandlinger - dokumenteret</h1>
                <div class="line"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p>
                <button type="button" class="btn btn-default cta hvr-float">Sådan foregår behandlingen</button>
                </div>
            </div>
        </div>

    </div>
</div>