html - How can I fit images of different sizes into a CSS grid of the same size, while maintaining the aspect ratio of the images?

Question

My specific use case is an image slider but the images do not want to stay in the grid.

Here is my latest approach:

The slider must be in a container div, so it can be moved around on the website. That container contains also some small thumbnail images below the current shown big image and limits the max width of each big image.

It contains a div as grid containing all images in line to slide. It is bigger than the container, so only one image at a time is visible.

See codepen for better understanding -> https://codepen.io/Mr-Law/pen/bGwjqWw

HTML

<div id="container">
  <div class="big_image" style="--n:7; --i:6;">

    <div>
      <img src="img1.jpg">
    </div>
    <div>
      <img src="img2.jpg">
    </div>
    <div>
      <img src="img3.jpg">
    </div>
    <div>
      <img src="img4.jpg">
    </div>
    <div>
      <img src="img5.jpg">
    </div>
    <div>
      <img src="img6.jpg">
    </div>
    <div>
      <img src="img7.jpg">
    </div>
  </div>

  <div class="w3-row-padding w3-section">

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(1)">
      <img class="preview-image" src="img1.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(2)">
      <img class="preview-image" src="img2.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(3)">
      <img class="preview-image" src="img3.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)">
      <img class="preview-image" src="img4.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)">
      <img class="preview-image" src="img5.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(6)">
      <img class="preview-image" src="img6.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(7)">
      <img class="preview-image" src="img7.jpg">
    </div>
  </div>
</div>

CSS

#container {
  width: 30em;
  height: 25em;
  overflow-x: hidden;
}

.big_image {
  --n: 1;
  display: grid;
  grid-auto-flow: column;

  align-items: center;

  width: calc(var(--n) * 100%);
  object-fit: contain;

  height: 85%;
  max-height: 100vh;
}
.big_image img {
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  transform: translate(calc(var(--tx, 0px) + var(--i, 0) * -100%));
}
.smooth {
  transition: transform calc(var(--f, 1) * 0.5s)
    cubic-bezier(1, 1.59, 0.61, 0.74);
}

.big_image > div {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

.preview-image {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.img-highlight {
    -webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 5px, #ff8000 0 -10px 10px, 5px 5px 4px 5px rgba(0,0,0,0);
    box-shadow: #FFF 0 -1px 4px, #ff0 0 0 5px, #ff8000 0 0 10px, 5px 5px 4px 5px rgba(0,0,0,0);
}

.w3-col{
  float:left;
  width: 11.4%;
  height: 3em;
  border: 0.1em solid #000;
  margin: 0 0.34em;
  line-height: calc(3em - 2px);
  text-align: center;
}

I tried countless variations so far and came to no solution.

Answer 1

I seem to have come across something a bit weird and note it here in case it helps us towards a solution.

If I take the code from the pen in the question and run it on my Windows 10 locally on Edge or Chrome it behaves well, the img is contained in the div. If I run it on the web from a server it is also OK, and runs OK on Safari on IOS (iPad). But on Firefox on W10 and running the pen or the snippet below on any of these systems/browsers it shows the problem described in the question.

I have tried running the code in an iframe as that's what the SO snippet system does to see if that causes a problem, but it runs fine on Ed ge/Chrome and Safari.Also I've explicitly set the font-size in body in case that was causing a problem but these have not changed the behaviour. I've run the code through the W3C validator which only objected to the lack of alt properties on the imgs.

I am stumped and hope someone can throw some light on this.

const dots = document.getElementsByClassName("demo");
const _C = document.querySelector(".big_image"),
  N = _C.children.length;

var slider_i = 0;
let x0 = null,
  locked = false,
  w;

function unify(e) {
  return e.changedTouches ? e.changedTouches[0] : e;
}

function lock(e) {
  x0 = unify(e).clientX;

  _C.classList.toggle("smooth", !(locked = true));
}

function drag(e) {
  e.preventDefault();
  if (locked)
    _C.style.setProperty("--tx", `${Math.round(unify(e).clientX - x0)}px`);
}

function move(e) {
  if (locked) {
    let dx = unify(e).clientX - x0,
      s = Math.sign(dx),
      f = +((s * dx) / w).toFixed(2);

    // if not at left or right end and f is bigger .2
    if ((slider_i > 0 || s < 0) && (slider_i < N - 1 || s > 0) && f > 0.1) {
      dots[slider_i].classList.remove("img-highlight");
      _C.style.setProperty("--i", (slider_i -= s));
      dots[slider_i].classList.add("img-highlight");
      f = 1 - f;
    }

    _C.style.setProperty("--tx", "0px");

    _C.style.setProperty("--f", f);

    _C.classList.toggle("smooth", !(locked = false));

    x0 = null;
  }
}

function showDivs(n) {
  for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove("img-highlight");
  }

  slider_i = slideIndex - 1;
  _C.style.setProperty("--i", slider_i);

  dots[slideIndex - 1].classList.add("img-highlight");
}

function size() {
  w = window.innerWidth;
}

size();

_C.style.setProperty("--n", N);

addEventListener("resize", size, false);

_C.addEventListener("mousedown", lock, false);

_C.addEventListener("touchstart", lock, false);

_C.addEventListener("mousemove", drag, false);

_C.addEventListener("touchmove", drag, false);

_C.addEventListener("mouseup", move, false);

_C.addEventListener("touchend", move, false);

window.document.getElementsByClassName("demo")[0].classList.add("img-highlight");

function currentDiv(n)
{
    showDivs(slideIndex = n);
}

#container {
  width: 30em;
  height: 25em;
  overflow-x: hidden;
}

.big_image {
  --n: 1;
  display: grid;
  grid-auto-flow: column;

  align-items: center;

  width: calc(var(--n) * 100%);
  object-fit: contain;

  height: 85%;
  max-height: 100vh;
}
.big_image img {
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  transform: translate(calc(var(--tx, 0px) + var(--i, 0) * -100%));
}
.smooth {
  transition: transform calc(var(--f, 1) * 0.5s)
    cubic-bezier(1, 1.59, 0.61, 0.74);
}

.big_image > div {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

.preview-image {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.img-highlight {
    -webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 5px, #ff8000 0 -10px 10px, 5px 5px 4px 5px rgba(0,0,0,0);
    box-shadow: #FFF 0 -1px 4px, #ff0 0 0 5px, #ff8000 0 0 10px, 5px 5px 4px 5px rgba(0,0,0,0);
}

.w3-col{
  float:left;
  width: 11.4%;
  height: 3em;
  border: 0.1em solid #000;
  margin: 0 0.34em;
  line-height: calc(3em - 2px);
  text-align: center;
}

<div id="container">
  <div class="big_image" style="--n:7; --i:6;">

    <div>
      <img src="https://images-na.ssl-images-amazon.com/images/I/71YGKgs-kOL._SL1500_.jpg">
    </div>
    <div>
      <img src="https://img.fotocommunity.com/testbild-05678122-8d2a-44e0-8e33-fcfe3f62a502.jpg?height=1080">
    </div>
    <div>
      <img src="https://images-na.ssl-images-amazon.com/images/I/71MwoazXzSL._SL1500_.jpg">
    </div>
    <div>
      <img src="https://www.naturparkmagazin.de/bild-des-tages/wp-content/uploads/sites/36/Sonnenuntergang-im-Moor-%E2%80%93-%C2%A9-VDNWerner-Bayerische-Rh%C3%B6n.jpg">
    </div>
    <div>
      <img src="https://images-na.ssl-images-amazon.com/images/I/71d-OQ81DTL._SL1500_.jpg">
    </div>
    <div>
      <img src="https://images-na.ssl-images-amazon.com/images/I/6179uLy6G9L._SL1500_.jpg">
    </div>
    <div>
      <img src="https://images-na.ssl-images-amazon.com/images/I/61fEZPS7kKL._SL1500_.jpg">
    </div>
  </div>

  <div class="w3-row-padding w3-section">

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(1)">
      <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71YGKgs-kOL._SL1500_.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(2)">
      <img class="preview-image" src="https://img.fotocommunity.com/testbild-05678122-8d2a-44e0-8e33-fcfe3f62a502.jpg?height=1080">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(3)">
      <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71MwoazXzSL._SL1500_.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)">
      <img class="preview-image" src="https://www.naturparkmagazin.de/bild-des-tages/wp-content/uploads/sites/36/Sonnenuntergang-im-Moor-%E2%80%93-%C2%A9-VDNWerner-Bayerische-Rh%C3%B6n.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(5)">
      <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/71d-OQ81DTL._SL1500_.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(6)">
      <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/6179uLy6G9L._SL1500_.jpg">
    </div>

    <div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(7)">
      <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/I/61fEZPS7kKL._SL1500_.jpg">
    </div>
  </div>
</div>