如何将不同大小的图像放入相同大小的 CSS 网格中，同时保持图像的纵横比？

Question

我的具体用例是图像滑块，但图像不想留在网格中。

这是我最新的方法：

滑块必须在容器 div 中，以便可以在网站上移动。该容器还包含当前显示的大图像下方的一些小缩略图图像，并限制每个大图像的最大宽度。

它包含一个 div 作为网格，其中包含所有要滑动的图像。它比容器大，因此一次只能看到一张图像。

查看 codepen 以获得更好的理解 -> 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;
}

到目前为止，我尝试了无数种变体，但没有找到解决办法。

Answer 1

我似乎遇到了一些奇怪的事情，并在此处记录下来，以防它帮助我们找到解决方案。

如果我从问题中的笔中获取代码并在我的 Windows 10 本地 Edge 或 Chrome 上运行它，它表现良好，img 包含在 div 中。如果我从服务器在网络上运行它也可以，并且可以在 IOS（iPad）上的 Safari 上运行。但是在 W10 上的 Firefox 上，并在这些系统/浏览器中的任何上运行下面的 pen 或 sn-p，它会显示问题中描述的问题。

我已尝试在 iframe 中运行代码，因为 SO sn-p 系统会这样做以查看这是否会导致问题，但它在 Edge/Chrome 和 Safari 上运行良好。我还明确设置了字体- 身体大小以防万一导致问题，但这些并没有改变行为。我已经通过 W3C 验证器运行了代码，它只反对 imgs 上缺少 alt 属性。

我很困惑，希望有人能对此有所了解。

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>