<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>img.weird-stretch</title>
    <style>
    body {
    	width: 400px;
    	margin: 0 auto;
    }
    .weird-stretch-container {
        float: right;
        width: 400px;
        height: 250px;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    
    img.weird-stretch {
        max-width: 100%;
        max-height: 100%
    }
    </style>
</head>

<body>

    <div class="weird-stretch-container">
        <img class="weird-stretch" alt="" src="resources/subjects_sm.png" width="100px" />
    </div>

    <div class="weird-stretch-container">
        <img class="weird-stretch" alt="" src="resources/subjects_sm.png" height="100px" />
    </div>

    <div class="weird-stretch-container">
        <img class="weird-stretch" alt="" src="resources/subjects_sm.png" width="132px" height="210px" />
    </div>
</body>

</html>