Demo: CSS object-fit

<div class='container'>
  <img class='responsive-image' src='https://via.placeholder.com/400x300' alt='Placeholder Image'>
</div>

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 2px solid #333;
}

.responsive-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// No JavaScript required for this demo