<ul class="list">
  <li class="list-item">
    <label class="radio-label">
      <input
        id="aspect-1-to-1"
        data-value="1 / 1"
        class="radio"
        name="style"
        type="radio"
        checked
      />
      <span class="radio-title">1 / 1</span>
    </label>
  </li>
  <li class="list-item">
    <label class="radio-label">
      <input
        id="aspect-2-to-1"
        data-value="2 / 1"
        class="radio"
        name="style"
        type="radio"
      />
      <span class="radio-title">2 / 1</span>
    </label>
  </li>
  <li class="list-item">
    <label class="radio-label">
      <input
        id="aspect-3-to-1"
        data-value="3 / 1"
        class="radio"
        name="style"
        type="radio"
      />
      <span class="radio-title">3 / 1</span>
    </label>
  </li>
  <li class="list-item">
    <label class="radio-label">
      <input
        id="aspect-8-to-5"
        data-value="8 / 5"
        class="radio"
        name="style"
        type="radio"
      />
      <span class="radio-title">8 / 5</span>
    </label>
  </li>
  <li class="list-item">
    <label class="radio-label">
      <input
        id="aspect-4-to-3"
        data-value="4 / 3"
        class="radio"
        name="style"
        type="radio"
      />
      <span class="radio-title">4 / 3</span>
    </label>
  </li>
  <li class="list-item">
    <label class="radio-label">
      <input
        id="aspect-16-to-9"
        data-value="16 / 9"
        class="radio"
        name="style"
        type="radio"
      />
      <span class="radio-title">16 / 9</span>
    </label>
  </li>
</ul>

<div class="block aspect-1-to-1">
  <mark> aspect-ratio: 1 / 1; </mark>
</div>

body {
  padding: 20px 0;
  background-color: #18191c;
  font-family: 'Roboto', sans-serif;
}

.block {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: clamp(290px, 50%, 420px);
  margin: auto;
  padding: 20px;
  color: #ffffff;
  border-radius: 5px;
  transition: all 300ms ease-in-out;
  font-size: 24px;
  background: url("https://i.ibb.co/jk5Vn7w/aspect-ratio.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

.block mark {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 5px 10px;
}

.aspect-1-to-1 {
  aspect-ratio: 1 / 1;
}

.aspect-2-to-1 {
  aspect-ratio: 2 / 1;
}

.aspect-3-to-1 {
  aspect-ratio: 3 / 1;
}

.aspect-4-to-3 {
  aspect-ratio: 4 / 3;
}

.aspect-16-to-9 {
  aspect-ratio: 16 / 9;
}

.aspect-8-to-5 {
  aspect-ratio: 8 / 5;
}

.list {
  display: flex;
  flex-wrap: wrap;
  width: clamp(290px, 50%, 420px);
  margin: 20px auto;
  padding: 10px 0;
  list-style-type: none;
  user-select: none;
}

.radio-label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-title {
  color: #ffffff;
}

.radio-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 12px);
  width: 25px;
  height: 25px;
  border: 1px solid #ffffff;
  border-radius: 50%;
}

.radio {
  width: 25px;
  height: 25px;
  opacity: 0;
  margin-right: 10px;
}

.radio:checked + .radio-title::before {
  background-color: #ffffff;
  background: radial-gradient(
    circle,
    #ffffff 0%,
    #ffffff 40%,
    transparent 50%,
    transparent 100%
  );
}

.list-item {
  margin-bottom: 10px;
}

.list-item:not(:last-child) {
  margin-right: 60px;
}

const block = document.querySelector('.block');
const regx = new RegExp('aspect-\\d+-to-\\d+', 'gm');
document.querySelector('.list').addEventListener('click', (e) => {
  const id = e.target.id;
  if (id) {
    block.className = block.className.replace(regx, id);
    const [width, height] = id.match(/\d+/gm);
    block.querySelector(
      'mark'
    ).textContent = `aspect-ratio: ${e.target.getAttribute('data-value')};`;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.