<div id="container">
  <div id="inputs">
    <label><input name="type" type="radio" value="cover" checked/>cover</label>
    <label><input name="type" type="radio" value="contain"/>contain</label>
    <label><input name="type" type="radio" value="auto"/>auto</label>
  </div>
  <div id="element"><h3>background-size</h3></div>
</div>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");

/* --- Стиль квадратного элемента --- */
#element {
  background-color: white;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://images.unsplash.com/photo-1590336936381-8984d1c31f1a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  width: 240px;
  height: 240px;
  margin: 24px auto;
  padding: 24px;
  border: 12px solid white;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* --- Стиль остальных элементов --- */
body {
  font-family: Inconsolata;
  background-color: #f5f5f5;
  text-align: center;
}

#container {
  padding: 24px 0 0;
}

#inputs label {
  margin: 8px;
}

#inputs label input {
  margin-right: 4px;
  vertical-align: top;
}

h3 {
  font-size: 24px;
  font-size: 20px;
  font-weight: bold;
  color: #39a1f4;
  margin-top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  background: rgba(255,255,255,.9);
 }
jQuery(document).ready(function($){
  $('input').on('change', function(){
    $('#element').css({
      'background-size': $(this).val()
    })
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js