使容器中的圖像填充頁面的一半

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>