Example of a proportionally sized div. Div automatically keeps proportions regardless of container width.

proportional_div.html

<div class="product_card">
  <div class="product_image" style="background-image: url('https://celsowhite.com/static/img/about/me.jpg')">
     <!-- Important: Any content in this proportional div must be positioned absolute so it adapts to the container proportions. -->
  </div>
  <div class="product_info">
    <h2>Celso</h2>
  </div>
</div>

proportional_div.scss

body {
  box-sizing: border-box;
}

// Structure

.product_card {
  width: 50%;
}

// Image Portion (Stays proportional because of the pseudo after element. That can be replaced for a before element.)

.product_image {
  background-size: cover;
  background-position: center;
}

// Magic that makes it proportional.

.product_image:after {
  content: "";
  display: block;
  padding-bottom: 60%; // Use this https://calculateaspectratio.com/ to calculate a percentage based on the desired ratio.
}

// Relative info container below image. Not proportional.

.product_info {
  background: white;
  width: 100%;
}

.product_info h2 {
  margin: 0;
  padding: 20px;
}