Photo And Image Scroll Gallery Dynamic Sizing

HTML Source

<div class="content_wrapper">

  <div class="image_wrapper">
    <img class="image_itself" src="./images/c-2160x2160.png" style="
      --widthRaw: 600;
      --heightRaw: 600;
      --widthPixels:  calc(var(--widthRaw)  * 1px);
      --heightPixels: calc(var(--heightRaw) * 1px);
      --widthBaseMin:  min(74vw, var(--widthPixels));
      --heightBaseMin: min(74vh, var(--heightPixels));
      --widthCheck: calc(var(--widthRaw) / var(--heightRaw) * var(--heightBaseMin));
      --heightCheck: calc(var(--heightRaw) / var(--widthRaw) * var(--widthBaseMin));
      width: min(var(--widthPixels), var(--widthBaseMin), var(--widthCheck));
      height: min(var(--heightPixels), var(--heightBaseMin), var(--heightCheck));
      " />
  </div>
</div>

CSS Source

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: black;
  color: #aaa;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

.content_wrapper {
  display: grid;
  place-items: center;
}

.image_wrapper {
  background-color: #ddd;
  display: grid;
  place-items: center;
  width: min(91vh, 100vw);
  height: min(91vh, 100vw);
}

.image_itself {
  border: 3px solid black;
}

JavaScript Source

const init = () => {
  console.log('init')
  console.log(c.alfa)
}

document.addEventListener('DOMContentLoaded', init)

JSON Data Source

{
  "note": "Example JSON data file"
}

Config JS Source

// This file can be used to represent
// and data that should be held outside
// of the main script

const c = {
  alfa: 'bravo',
}