Marketingtools ratio's

by joepenzo

HTML

<section>
  <div data-images="2" class="image-wrap linkedin-images-wrap orientation-square mixed-orientations" style="">
    <div>
      <img class="img1" src="https://picsum.photos/800/800" />
    </div>
    <div>
      <img class="img2" src="https://picsum.photos/434/800" />
    </div>
  </div>
</section>


<section>
  <div data-images="2" class="image-wrap linkedin-images-wrap orientation-square mixed-orientations" style="">
    <div>
      <img class="img1" src="https://picsum.photos/800/800" />
    </div>
    <div>
      <img class="img2" src="https://picsum.photos/800/434" />
    </div>
  </div>
</section>

<section>
  <div data-images="2" class="image-wrap linkedin-images-wrap orientation-square mixed-orientations" style="">
    <div>
      <img class="img1" src="https://picsum.photos/800/800" />
    </div>
    <div>

      <img class="img2" src="https://picsum.photos/800/666" />
    </div>
  </div>
</section>

<section>
  <div data-images="2" class="image-wrap linkedin-images-wrap orientation-square mixed-orientations" style="">
    <div>
      <img class="img1" src="https://picsum.photos/800/800" />
    </div>
    <div>

      <img class="img2" src="https://picsum.photos/800/640" />
    </div>
  </div>
</section>

<section>
  <div data-images="2" class="image-wrap linkedin-images-wrap orientation-square mixed-orientations" style="">
    <div>
      <img class="img1" src="https://picsum.photos/1200/1200" />
    </div>
    <div>
      <img class="img2" src="https://picsum.photos/1200/750" />
    </div>
  </div>
</section>

SCSS

section {
    border: 5px solid red;
    width: 700px;
    margin-bottom: 30px;
}

.image-wrap {      
    min-height: auto;
    height: auto;
    display: grid;
    overflow: clip;
       
    grid-template-columns: auto auto;
    grid-template-rows: 100%;
  
 
    div {
        border: 1px solid red;
    
        position: relative;
        width: 100%;
        height: 100%;
        background-color: green;
        
        img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }

    div:first-child {
        /* aspect-ratio: 1; */
    }

    div:nth-child(2) {

    }
}

JavaScript

/**
document.addEventListener('DOMContentLoaded', function() {

  const sections = document.querySelectorAll('section');

  sections.forEach(section => {
    const wrapper = section.querySelector('.image-wrap');
    const img1 = wrapper.querySelector('.img1');
    const img2 = wrapper.querySelector('.img2');

    const image1Size = {};
    const image2Size = {};

    img1.onload = function() {
      image1Size.w = img1.naturalWidth;
      image1Size.h = img1.naturalHeight;
    };

    img2.onload = function() {
      image2Size.w = img2.naturalWidth;
      image2Size.h = img2.naturalHeight;

      if (image1Size.w && image1Size.h) {
        calculateAspectRatio(wrapper, image1Size, image2Size);
      }
    };

  });

  function calculateAspectRatio(wrapper, image1Size, image2Size) {

    const image2Ratio = image2Size.w / image2Size.h;
    const totalW = image2Size.w + (image1Size.w / image2Ratio);
    const totalRatio = totalW / image2Size.h;

    wrapper.style.aspectRatio = totalRatio.toFixed(2);

    console.log(Calculated aspect ratio for wrapper: ${totalRatio.toFixed(2)});
    
    debug(wrapper);
  }
  
  function debug(wrapper) {
	  wrapper.closest('section').style.borderColor = 'lawngreen';
  }
});
**/

document.addEventListener('DOMContentLoaded', function() {

  const sections = document.querySelectorAll('section');

  sections.forEach(section => {
    const wrapper = section.querySelector('.image-wrap');
    const img1 = wrapper.querySelector('.img1');
    const img2 = wrapper.querySelector('.img2');

    const image1Size = {};
    const image2Size = {};

    img1.onload = function() {
      image1Size.w = img1.naturalWidth;
      image1Size.h = img1.naturalHeight;
      if (image2Size.w && image2Size.h) {
        calculateAspectRatio(wrapper, image1Size, image2Size);
      }
    };

    img2.onload = function() {
      image2Size.w = img2.naturalWidth;
      image2Size.h = img2.naturalHeight;
      if (image1Size.w && image1Size.h) {
       ...