JSFiddle - React, Tailwind, and code Playground

by Bogdan Brinza

HTML

<div>Case 1</div>

<div style="height: 50px;">
    <ol>
        <li style="list-style: none;"><img class="img1" src="http://ie.microsoft.com/testdrive/Views/Homepage/IE11Logo.png"></li>
    </ol>
</div>

<div>Case 2</div>

<div class="overflow2">
    <div>
        <div class="wrap2">
            <img class="img2" src="http://ie.microsoft.com/testdrive/Views/Homepage/IE11Logo.png">
        </div>
    </div>
</div>

CSS

/* Case 1 */

.img1 {
	width: auto !important;
	display: inline-block;
	max-height: 100% !important;
}

/* Case 2 */

        .img2 {
            height: 100%;
        }

        .overflow2 {
            height: 50px;
        }

        .wrap2 {
            height: 100%;
        }