JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="fixed">
    <div class="square">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="/>
    </div>
</div>

<div class="explain"></div>

CSS

.explain:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    font-size: 12px;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .9);
    font-family: sans-serif;
    padding: 20px;
    z-index: 1;
}

@media all and (orientation: portrait) {
    .explain:before {
        content: "To view the bug, ensure the browser width is larger than its height."
    }
}

@media all and (orientation: landscape) {
    .explain:before {
        content: "Shrink browser height and observe the red box doesn’t change its width properly to match its child image. (The red should never show.) Refreshing the page fixes the issue."
    }
    
    .fixed {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        text-align: center;
    }

    .square {
        display: inline-block;
        height: 100%;
        background: red;
    }
    
    .square img {
        max-width: 100%;
        position: relative;
        z-index: 1;
        height: 100%;
        display: block;
        width: auto;
    }
}