<form action="">
  <fieldset>
    <legend class="">Pick the aspect ratio</legend>
    <p>
      <input class="sr-only" type="radio" name="ratio" id="r1" checked data-ratio="4/3" />
      <label for="r1">4/3</label>
    </p>
    <p>
      <input class="sr-only" type="radio" name="ratio" id="r2" data-ratio="2/1" />
      <label for="r2">2/1</label>
    </p>
    <p>
      <input class="sr-only" type="radio" name="ratio" id="r3" data-ratio="1/1" />
      <label for="r3">1/1</label>
    </p>
    <p>
      <input class="sr-only" type="radio" name="ratio" id="r4" data-ratio="16/9" />
      <label for="r4">16/9</label>
    </p>
  </fieldset>
</form>
<article class="card">
  <div class="card__thumb">
    <img src="https://s3.eu-central-1.amazonaws.com/ishadeed.com/muffins.png?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEP7%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDGV1LWNlbnRyYWwtMSJHMEUCIQDmOzx4HDaFUYpdEcQTa%2By1655mBUFgouCHN6AMPq0W7gIgeXoni%2Fx5siO9dm8ZrWrhXjphQxfzWHCnoqT0Py9OGhYq%2FwIIt%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAAGgwzNDkxMjMwNjkzMzEiDLZHttIkfrJ5TzrBBSrTAhIVkMHZodJFxz9hntRzPcbs3Zl0UIzHCE0Ava1vcwKnG8t3ViIRC%2BnUAdZBGKpdg6wNYAPq%2B%2BdyFWrY%2FNkG49nLVaMgFrL0NjuLJ2nF0hSKmya7a3AIaYZz1QQrlQYkGnOdiNg1HX88hCVimryEgXassVpXhymarV3lrn4rzbetPrOh7%2Byrdk9INREpY5rphLa5cFgsdCGn5nDJm8eSpFeAQbaQ6LSwLmpufGXbrgFJOuHuSHl4ZXZdWINhuOllHglXw1A4csHanke1wgxF9%2BkUco3OBlqqba06g0ynGoAe0MDt8HDsU5ecDSghRzv9hCjtm7owR9ireTABsTw1njA2viB9MR91SmJHmnQ%2FBij3IO8fsVlq7cCN%2BCXn3af%2F1aqp7jOEfOS5M2hF7N6jVPAupFRVP92nllBDh5gM9B3XJucokiL%2Brv%2BHh9ts7%2FZ27UR6PDCj%2B4uGBjqzAvo5CZzlScLDdAC1GyNIVDx31%2F2QBi%2BlV3jVnZtVS9k6UjToFTLF5HlB25mHWlJ%2FxqJRCaxScKyz45whpGVo34wWpNcRMLlWiPN7dAU6bV59ZYoMOeMjYOXEUOGOkZmEcu6EXPIZwIUWs42%2FpDd8Ns4wfU6SgawdTs7YaOzObnId8mp0Iqeo5HQv75qyZbwofc7hgBP%2BJ0m7%2BehAocT4hqupv7MM7EosN5lmKSZlEqSdwjZ4qKdO6owXhiKOUr5Z1CT5SDPHzBva8dWNlHxmhGLXUi%2F2DgZHMwFxqswbg9qb8IkdYZJwlgDy2KRUsOX3DPMEyB1Srwk8thM49W51PHuBQkjWi2Z9q%2BT%2FHQlAGSLM4Q5JSQBrjmBINlaFeXceAGLQKf8vFfAMLUnEcjqpB4tN8Zc%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20210611T061341Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIAVCSK3IWJ4YTUY3VD%2F20210611%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Signature=1b9cce28ec1cf4b4c058f22ef440b2c5cb302caa98b0105b14833f103e156f13" alt="" />
  </div>
  <div class="card__content">
    <h3>Muffins Recipe</h3>
    <p>Servings: 3</p>
  </div>
</article>

.card {
  max-width: 260px;
  margin: 2rem auto 0;
}

.card__thumb {
  position: relative;
  --ratio: 4/3;
  aspect-ratio: var(--ratio);
  transition: 0.4s ease-out;

  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.card__content {
  padding: 1rem;
  background-color: #e6e6e6;

  h3 {
    font-weight: bold;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
  }
}

img {
  display: block;
  max-width: 100%;
}

form {
  margin-top: 2rem;
}

fieldset {
  display: flex;
  gap: 1rem;
  justify-content: center;
  text-align: center;
}

legend {
  margin-bottom: 1rem;
}

input:checked + label {
  color: #fff;
  background-color: #1b84c2;
  box-shadow: inset 0 0 0 4px rgba(#000, 0.1), 0 3px 10px 0 rgba(#000, 0.2);
}

input + label {
  display: inline-block;
  min-width: 50px;
  text-align: center;
  padding: 6px 20px;
  color: #696969;
  border: 1px solid #d0d0d0;
  border-radius: 100px;
  cursor: pointer;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body {
  font-family: "system-ui";
  line-height: 1.4;
  padding: 1rem;
  background-color: #f7f7f7;
}

* {
  box-sizing: border-box;
}

let options = document.querySelectorAll("[name=ratio]");

for (var i = 0; i < options.length; i++) {
  options[i].addEventListener("change", function () {
    let ratio = this.getAttribute("data-ratio");

    document.querySelector(".card__thumb").style.setProperty("--ratio", ratio);
  });
}