JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="team-stacked">
                        <h6 class="header-6 strong">Meet the Team</h6>
                        <div class="team-stacked__items" style="transform: scale(1); transform-origin: center center;">
                            <picture class="team-stacked__item">
                                <source srcset="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85&amp;format=webp" type="image/webp">
                                <source srcset="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85">
                                <img src="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85" alt="">
                            </picture>
                            <picture class="team-stacked__item">
                                <source srcset="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85&amp;format=webp" type="image/webp">
                                <source srcset="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85">
                                <img src="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85" alt="">
                            </picture>
                            <picture class="team-stacked__item">
                                <source srcset="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85&amp;format=webp" type="image/webp">
                                <source srcset="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85">
                                <img src="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85" alt="">
                            </picture>
                            <picture class="team-stacked__item">
                                <source srcset="/img/temp/primary-page-header.png?width=75&amp;height=75&amp;quaility=85&amp;format=webp" type="image/webp">
                               ...

CSS

.team-stacked {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-column-gap: 0px;
  grid-row-gap: 16px;
}
.header .team-stacked {
  margin-top: auto;
}
.header__megamenu-column .team-stacked {
  margin-top: 8px;
}
.team-stacked .header-6 {
  width: 100%;
  color: var(--colours-brand-refreshing-blue-tint-100);
}
.team-stacked .header-6 span {
  color: var(--mono-0);
}
.team-stacked__items {
  display: flex;
}
.team-stacked picture {
  display: block;
  border-radius: 360px;
  border: 4px solid var(--colours-brand-strong-blue-tint-100);
  box-shadow: 0px 0px 29px 0px rgba(0, 0, 0, 0.05), 0px 9px 9px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.team-stacked picture:not(:first-child) {
  margin-left: -16px;
}
.team-stacked picture img {
  display: block;
  width: 72px;
  height: 72px;
  min-width: 72px;
  aspect-ratio: 1;
  object-fit: cover;
}
.team-stacked .button {
  transform: translateX(-50%);
  border: 4px solid var(--colours-brand-strong-blue-tint-100);
  box-shadow: 0px 0px 29px 0px rgba(0, 0, 0, 0.05), 0px 9px 9px 0px rgba(0, 0, 0, 0.05);
}

JavaScript

function scaleContainer() {
    const container = document.querySelector('.team-stacked');
    const scaleWrapper = document.querySelector('.team-stacked__items');
    const containerWidth = container.scrollWidth; // Total width of the children
    const parentWidth = scaleWrapper.parentElement.clientWidth; // Width of the screen / parent

    const scale = parentWidth < containerWidth ? parentWidth / containerWidth : 1;
    scaleWrapper.style.transform = `scale(${scale})`;
    scaleWrapper.style.transformOrigin = 'center left'; // This ensures it scales from the center
}

// Run on load
scaleContainer();

// Run on resize
window.addEventListener('resize', scaleContainer);