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

Question

So, I have a question that I haven't been able to find the answer to on Google, so I hope that you can help me here.

I have banner that's divided in two, where I want each of the two images to go full left, and full right - but the text needs to stay in the container size.

At the moment i have made a container with the text, and a container-fluid with the images, where I have moved it up with the margin-top property. This doesn't work for me.

See my example:

Here's the code that I'm not satisfied with

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

Here is my version of a responsive layout for your issue.

1. I've placed each text in the same cell with its image. These cells are positioned relatively.

2. I wrapped each text into the div with the col-sm-6 class. And I wrapped these divs into containers with fixed width. These containers are positioned absolutely.

3. When the width of the screen becomes less than 481px, each part of the text is located under its image.

Please check the result: 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

Add a row inside col-sm-6 webshop and col-sm-6 treatment , use offset and push to adjust the columns

<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>