<style>
div {
    position: relative;
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}
img {
    max-width: 100%;
    max-height: 100%;
}

#b {
    width: 50px;
    height: 25px;
}

#c {
    width: 25px;
    height: 50px;
}

#d, #e {
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
}

#f, #g {
    width: auto;
    height: auto;
    min-width: 30px;
    min-height: 30px;
}
</style>

<div><img id="a" src="badchess-wide.png"></div>
<div><img id="b" src="badchess-wide.png"></div>
<div><img id="c" src="badchess-tall.png"></div>
<div><img id="d" src="badchess-wide.png"></div>
<div><img id="e" src="badchess-wide.png"></div>
<div><img id="f" src="badchess-wide.png"></div>
<div><img id="g" src="badchess-wide.png"></div>