Сохранение пропорций блока при уменьшении страницы

CSS код:

.smooth-box {
	position: relative;
	width: 100%;
	float: left;
	font-size: 12px;
	background: red;
}
  
.smooth-box:before {
	content: "";
	display: block;
	margin-top: 100%; 
}
  
.ratio4_3:before {
	margin-top: 104%;
}

HTML код:

<div class="smooth-box ratio4_4">
    <div class="smooth-box_content">
        <img src="img/product.png" class="hits__slider-image-product" alt="" />
    </div>
</div>