object-fit:contain

CSS3 inset text-shadow trick Written down by Jyri Tuulos http://about.me/jyrituulos Effect originally found at http://timharford.com/ All credits for originality go to Finalised Design (http://finalisedesign.com/) Note that this trick only works for darker text on solid light background.

by Felis Catus

HTML

<h1 class="inset-text">
test
</h1>
<div style='height: 300px; width: 100px; background-color: red'>
<img style='height: 100%; width: 100%; object-fit: contain' src='http://www.sherkspear.com/wp-content/uploads/2015/04/jsfiddle.png'/> 
</div>

<div style='height: 100px; width: 300px; background-color: green'>
<img style='height: 100%; width: 100%; object-fit: contain' src='http://www.sherkspear.com/wp-content/uploads/2015/04/jsfiddle.png'/> 
</div>

CSS

body {
    /* This has to be same as the text-shadows below */
    background: #def;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(10,60,150, 0.8);
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }