<!-- <div class="wrapper">
  <img src="https://images.dog.ceo/breeds/corgi-cardigan/n02113186_6408.jpg" alt="corgi" />
  <span>no <code>object-fit</code></span>
</div> -->

<select id="select" name="object-fit">
  <option name="object-fit" value="none">none</option>
  <option name="object-fit" value="contain">contain</option>
  <option name="object-fit" value="cover">cover</option>
  <option name="object-fit" value="scale-down">scale-down</option>
  <option name="object-fit" value="fill">fill</option>
</select>

<div class="wrapper">
  <img id="image-fit"
       src="https://images.dog.ceo/breeds/corgi-cardigan/n02113186_6408.jpg" alt="corgi" />
</div>

body {
  background-image: linear-gradient(320deg, darkkhaki 0%, PaleGoldenrod 70%);
  font-family: sans-serif;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

#select {
  margin-right: 5rem;
  font-size: 1.2rem;
}

.wrapper {
  overflow: hidden;
  width: 400px;
  height: 200px;
  border: 1px solid purple;
}

img {
  height: 100%;
  width: 100%;
}

.fit {
  object-fit: contain;
}

let img = document.getElementById('image-fit')
let select = document.getElementById('select')

function updateFit(evt) {
  const value = evt.currentTarget.selectedOptions[0].value
  img.style.objectFit = value
}

select.addEventListener('change', updateFit)