Edit in JSFiddle

<div class="container">
	<div class="row">
		<div class="col-xs-3 col-sm-3">
			<div class="image-box ratio-1-1">
				<div class="image" style="background-image:url(https://placeimg.com/640/480/animals);"></div>
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<div class="image-box ratio-1-1">
				<div class="image" style="background-image:url(https://placeimg.com/640/480/animals);"></div>
			</div>
		</div>
		<div class="col-xs-5 col-sm-5">
			<div class="image-box ratio-1-1">
				<div class="image" style="background-image:url(https://placeimg.com/640/480/animals);"></div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-3 col-sm-3">
			<div class="image-box ratio-5-3">
				<div class="image" style="background-image:url(https://placeimg.com/640/480/people);"></div>
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<div class="image-box ratio-5-3">
				<div class="image" style="background-image:url(https://placeimg.com/640/480/people);"></div>
			</div>
		</div>
		<div class="col-xs-5 col-sm-5">
			<div class="image-box ratio-5-3">
				<div class="image" style="background-image:url(https://placeimg.com/640/480/people);"></div>
			</div>
		</div>
	</div>
</div>

.image-box {
	position: relative;
	overflow: hidden;
}
.image-box::before {
	content: "";
	display: block;
	padding-top: 100%; /* initial ratio of 1:1*/
}
.image-box .image {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background-size: cover;
	background-position: center;
}
.image-box.ratio-1-1::before {
	padding-top: 100%;
}
.image-box.ratio-2-1::before {
	padding-top: 50%;
}
.image-box.ratio-1-2::before {
	padding-top: 200%;
}
.image-box.ratio-4-3:before {
	padding-top: 75%;
}
.image-box.ratio-5-3:before {
	padding-top: 60%;
}
.image-box.ratio-16-9:before {
	padding-top: 56.25%;
}