Никита Сергеевич

<div class="ratio_image ratio_image_1x1">
		<img src="http://lorempixel.com/500/500/" alt="">
	</div>

	<div class="ratio_image ratio_image_1x2">
		<img src="http://lorempixel.com/500/500/" alt="">
	</div>

	<div class="ratio_image ratio_image_2x1">
		<img src="http://lorempixel.com/500/500/" alt="">
	</div>

	<div class="ratio_image ratio_image_2x2">
		<img src="http://lorempixel.com/500/500/" alt="">
	</div>

.ratio_image {
	width: 300px;
	height: 300px;
	float: left;
	margin: 20px;
	position: relative;
	overflow: hidden;
}

.ratio_image:before {
	width: 100%;
    display: block;
    content: "";
}

.ratio_image img {
	min-width: 100%;
	min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.ratio_image_2x1 {
	width: 600px;
}

.ratio_image_1x2,
.ratio_image_2x2 {
	height: 600px;
}

.ratio_image img {
	width: 100%;
}

.ratio_image_1x1:before {
    padding-top: 100%; /* (300 / 300) * 100%; */
}

.ratio_image_2x1:before {
    padding-top: 200%; /* (600 / 300) * 100%; */
}

.ratio_image_1x2:before {
    padding-top: 50%; /* (300 / 600) * 100%; */
}

.ratio_image_2x2:before {
    padding-top: 100%; /* (600 / 600) * 100%; */
}