30. Dezember 2023

Bootstrap-Layout Text und Bild 50/50

Ein beliebtes Gestaltungselement auf Websites ist die Kombination aus Text und Bild, wobei das Bild die Hälfte der Bildschirmbreite einnehmen soll, der Text aber wiederum innerhalb des Containers bleiben soll.

Demo: www.fbnfrtg.de/demo/text-und-bild-50-50.html

Hier ist das perfekte Snippet für diesen Zweck:

 <div class="section bgcolor1">
    <img src="assets/img/pizza-1.jpg" class="half-width-image-left" loading="lazy">
    <div class="container">
        <div class="row py-5 justify-content-md-end">
            <div class="col-12 col-md-6">
                <div class="pl-0 ps-md-4">
                    <h2>Lorem ipsum</h2>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                </div>
            </div>
        </div>
    </div>
</div>

 <!-- ****************** -->

 <div class="section bgcolor2">
    <img src="assets/img/bar.jpg" class="half-width-image-right" loading="lazy">
    <div class="container">
        <div class="row py-5">
            <div class="col-12 col-md-6">
                <div class="pe-0 pe-md-4">
                    <h2>Lorem ipsum</h2>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                </div>
            </div>
        </div>
    </div>
</div>Code-Sprache: HTML, XML (xml)

body{
    --viewportWidth: calc(100vw - var(--scrollbarWidth));
}

div{
    position: relative;
}

.half-width-image-left {
    width: calc(0.5 * var(--viewportWidth));
    height: 100%;
    position: absolute;
    left: 0;
    object-fit: cover;
    object-position: 50% 50%;
}

.half-width-image-right {
    width: calc(0.5 * var(--viewportWidth));
    height: 100%;
    position: absolute;
    right: 0;
    object-fit: cover;
    object-position: 50% 50%;
}

@media ( max-width: 768px) {
    .half-width-image-left,
    .half-width-image-right {
        float: none;
        width: 100%;
        max-height: 40vw;
        position: relative;
    }
}Code-Sprache: CSS (css)

<script>
    const scrollbarWidth = window.innerWidth - document.body.clientWidth;
    document.body.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
</script>Code-Sprache: HTML, XML (xml)

Mobil werden die Elemente gestapelt, wobei das Bild immer vor dem Text dargestellt wird, unabhängig davon ob das Bild in der Desktop-Ansicht rechts oder links ist.