Блок с изображением

<div class="el_offerItem_xxxxxx col">
	<div class="wrapperInner">
		<div class="imageBlock image-flex">
			<a class="el" href="#"><img src="offer.png" alt=""></a>
		</div>
 
		...
 
	</div>
</div>

.image-flex
{
	position: relative;
	width: 100%;
	padding-bottom: 100%; /* Рассчитывается согласно блока который верстается */
}
.image-flex .el
{
	position: absolute;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
}
.image-flex .el img
{
	display: block;
	margin: 0px auto;
	max-width: 100%;
	max-height: 100%;
}
 
/* Например для изображения товара */
.el_offerItem_xxxxxx .imageBlock
{
	padding-bottom: 130%;
}