Mozilla Protocol
  • 16.1.0

Split: Constrained Media

The class mzp-l-split-media-constrain-height added to the mzp-c-split-media wrapper will make the media scale to fit the height of the container, determined by the amount of content in the body. It will shrink to fit a short container or expand to fit a tall one (but won’t be upscaled beyond the image’s native dimensions).

As with the media overflow option, height-constrained media can overflow if the container is tall, causing part of the image to be hidden, so choose wisely.

<section class="mzp-c-split ">
    <div class="mzp-c-split-container">
        <div class="mzp-c-split-body ">

            <h1 class="mzp-u-title-md">Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.</p>
            <p><button class="mzp-c-button" type="button">Call to action</button></p>

        </div>
        <div class="mzp-c-split-media mzp-l-split-media-constrain-height">
            <img class="mzp-c-split-media-asset" src="../../img/image-1-1.jpg" alt="">
        </div>
    </div>
</section>