Marketingtools ratio's

by joepenzo

HTML

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

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

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

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

      <img id="img2" src="https://picsum.photos/800/640" />
    </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 {
        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

const wrapper = document.getElementById("image-wrap");

const img1 = document.getElementById("img1");
const img2 = document.getElementById("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;
}


setTimeout(() => {    
    const image2ratio = (image2Size.w/image2Size.h);
    const totalW = image2Size.w + (image1Size.w/image2ratio);    
    const totalRatio = totalW/image2Size.h;

	console.log(totalRatio);
    wrapper.style.aspectRatio = totalRatio.toFixed(2);
  
},1000);