The adjustHeight function is a JavaScript function that adjusts the height of the elements with the class name starting with "breakit" to match the height of their child element with the class name starting with "brokeit".

index.html

<div class="breakit" style="position: relative;">
  <div class="brokeit" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;">
    <img src="..." style="height:375px;">
  </div>
</div>

inherit.js

'use strict';

const adjustHeight = () => {
  const breakItElems = document.querySelectorAll('[class^="breakit"]');

  if (!breakItElems) {
    console.error('No elements found with class "breakit"');
    return;
  }

  breakItElems.forEach((breakItElem) => {
    const brokeItElem = breakItElem.querySelector('[class^="brokeit"]');

    if (!brokeItElem) {
      console.error('No element found with class "brokeit" inside a "breakit" element');
      return;
    }

    const height = brokeItElem.clientHeight;
    breakItElem.style.height = `${height}px`;
  });
};

window.addEventListener('resize', adjustHeight);
document.addEventListener('DOMContentLoaded', adjustHeight);