JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div class="wrap">
<button id="ratio_button"><div id="ratio_btn" data-aspect-ratio="9-16"></div></button>
</div>

<button>16:9</button>
<button>9:16</button>
<button>4:3</button>
<button>3:4</button>
<button>3:2</button>
<button>2:3</button>
<button>1:1</button>

CSS

button#ratio_button {
	width: 120px;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	
  }
  
  #ratio_btn {
	width: 100px;
	height: 100px;
    transition: transform 0.3s ease-in, width 0.3s ease-in-out, height 0.38s ease-in-out 0.1s;
	border-radius: 0.4rem;
	border: 4px solid #000;
	background: transparent;
  }

  /* Define aspect ratios as CSS classes */
  [data-aspect-ratio="16-9"] {
	width: 90px !important;
	height: 51px !important;
  }
  [data-aspect-ratio="9-16"] {
	width: 51px !important;
	height: 90px !important;
  }
  [data-aspect-ratio="4-3"] {
	width: 90px !important;
	height: 60px !important;
  }
  [data-aspect-ratio="3-4"] {
	width: 60px !important;
	height: 90px !important;
  }
  [data-aspect-ratio="3-2"] {
	width: 90px !important;
	height: 67px !important;
  }
  [data-aspect-ratio="2-3"] {
	width: 67px !important;
	height: 90px !important;
  }
  [data-aspect-ratio="1-1"] {
	width: 70px !important;
	height: 70px !important;
  }
  .wrap{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 120px;
	background: #aaa;
  }

JavaScript

const ratio_btn = document.querySelector('#ratio_btn');
  const buttons = document.querySelectorAll('button');

  buttons.forEach((_) => {
    _.addEventListener('click', (e) => {
		const btn_ar_value = e.target.textContent
		ratio_btn.setAttribute("data-aspect-ratio",btn_ar_value.replace(":", "-"));
    });
  });