Aspect Ratio Conversion

by Sam Fereday

HTML

<div class="row">

  <div class="col">
    <div class="slide">
      <img src="http://i.imgur.com/dnNTl2b.jpg" />
    </div>
    <div class="content">
      <h3>What does a strong password look like?</h3>
      <p>Which is the best password to have? Real words, nonsense words, jumbles of letters and symbols, or something a little more straightforward? Find out.</p>
    </div>
  </div>
  <div class="col">
    <div class="slide">
      <img src="http://i.imgur.com/dnNTl2b.jpg" />
    </div>
    <div class="content">
      <h3>What does a strong password look like?</h3>
      <p>Which is the best password to have? Real words, nonsense words, jumbles of letters and symbols, or something a little more straightforward? Find out.</p>
    </div>
  </div>
  <div class="col">
    <div class="slide">
      <img src="http://i.imgur.com/dnNTl2b.jpg" />
    </div>
    <div class="content">
      <h3>What does a strong password look like?</h3>
      <p>Which is the best password to have? Real words, nonsense words, jumbles of letters and symbols, or something a little more straightforward? Find out.</p>
    </div>
  </div>
  
  

</div>

<input type="text" id="width" placeholder="1920" />
<input type="text" id="height" placeholder="1080" />
<input type="text" id="percentile" placeholder="56.25%" />
<button id="heightFrom">Height From Width</button>
<button id="widthFrom">Width From Height</button>

CSS

input[type="text"] {
  max-width: 4em;
}

.col {
  max-width: 30%;
  padding-right: 1.165%;
  padding-left: 1.165%;
  float: left;
}

.slide {
  position: relative;
  /* padding-bottom: 1.4em; */
  padding-bottom: 42.85%;
  /* background: #333; */
  overflow: hidden;
}

img {
  max-width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  border: 1px solid #ccc;
}

JavaScript

console.clear();

// Could also be achieved with pure CSS if you rely on a padding-basis as opposed to 'height'.
// ...
function ratioFactor() {
  let ratio = {
    x: 21,
    y: 9
  }
  return ratio.x / ratio.y;
}

function heightFromWidth(n) {
  return n / ratioFactor();
}

function widthFromHeight(n) {
  return n * ratioFactor();
}

function asPercentile(a, b) {
  return (Math.min(a, b) / Math.max(a, b)) * 100;
}

// ...
var wInput = document.getElementById("width");
var hInput = document.getElementById("height");
var percentile = document.getElementById("percentile");
var buttonHeight = document.getElementById("heightFrom");
var buttonWidth = document.getElementById("widthFrom");

buttonHeight.addEventListener("click", function() {
  if (wInput.value.length === 0) return;
  hInput.value = heightFromWidth(wInput.value);
  percentile.value = asPercentile(wInput.value, hInput.value) + "%";
});

buttonWidth.addEventListener("click", function() {
  if (hInput.value.length === 0) return;
  wInput.value = widthFromHeight(hInput.value);
  percentile.value = asPercentile(wInput.value, hInput.value) + "%";
});

var slides = document.getElementsByClassName('slide');

function calculate() {
  for (var i = 0; i < slides.length; i++) {
    // slides[i].style.paddingBottom = heightFromWidth(slides[i].clientWidth) + "px";
    slides[i].style.height = heightFromWidth(slides[i].clientWidth) + "px";
  }
}

window.addEventListener('resize', function() {
 // calculate();
});

//calculate();