Edit in JSFiddle

.containerList {
    background-color: gray;
    margin-bottom:10px;
    text-align:center;
}

.containerList .containerList-item {
    border:3px solid white;
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: top;
    overflow:hidden;
    text-align:center;
    margin:10px;
    background-color: black;
}

.mode1 img {
    height: 100%;
    width: 100%;
}

.mode2 img {
    height: auto;
    max-width: 100%;
}

.mode3 img {
    height: 100%;
    width: auto;
}

.mode4 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.mode5 img {
    object-fit: contain;
    height: 100%;
    width: 100%;
    
}

.mode6 img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    
}

 <h3>height: 100%;width: 100%;</h3>    
 <div class="containerList">
	<div class="containerList-item mode1">
        <img src="http://lorempixel.com/400/200/sports" />
	</div>
	<div class="containerList-item mode1">
        <img src="http://lorempixel.com/200/500/sports" />
	</div>
	<div class="containerList-item mode1">
        <img src="http://lorempixel.com/400/400/sports" />
	</div>
</div>
        
<h3>height: auto;max-width: 100%;</h3>    
    
 <div class="containerList">
	<div class="containerList-item mode1">
        <img src="http://lorempixel.com/400/200/sports" />
	</div>
	<div class="containerList-item mode2">
        <img src="http://lorempixel.com/200/500/sports" />
	</div>
	<div class="containerList-item mode2">
        <img src="http://lorempixel.com/400/400/sports" />
	</div>
</div>
        
 <h3>height: 100%;width: auto;</h3>    
     
  <div class="containerList">
	<div class="containerList-item mode3">
        <img src="http://lorempixel.com/400/200/sports" />
	</div>
	<div class="containerList-item mode3">
        <img src="http://lorempixel.com/200/500/sports" />
	</div>
	<div class="containerList-item mode3">
        <img src="http://lorempixel.com/400/400/sports" />
	</div>
</div>

 <h3>backgrounds</h3>
 <div class="containerList">
	<div class="containerList-item mode4" style="background-image:url('http://lorempixel.com/400/200/sports')">
		
	</div>
	<div class="containerList-item mode4" style="background-image:url('http://lorempixel.com/200/500/sports')">
	</div>
	<div class="containerList-item mode4" style="background-image:url('http://lorempixel.com/400/400/sports')">
	</div>
 </div>

 <h3>object-fit: contain;</h3>
  <div class="containerList">
	<div class="containerList-item mode5">
        <img src="http://lorempixel.com/400/200/sports" />
	</div>
	<div class="containerList-item mode5">
        <img src="http://lorempixel.com/200/500/sports" />
	</div>
	<div class="containerList-item mode5">
        <img src="http://lorempixel.com/400/400/sports" />
	</div>
</div>

 <h3>object-fit: cover;</h3>
  <div class="containerList">
	<div class="containerList-item mode6">
        <img src="http://lorempixel.com/400/200/sports" />
	</div>
	<div class="containerList-item mode6">
        <img src="http://lorempixel.com/200/500/sports" />
	</div>
	<div class="containerList-item mode6">
        <img src="http://lorempixel.com/400/400/sports" />
	</div>
</div>